标题amap-vue 是对高德地图的二次封装的一个插件 适用于 vue
amap-vue官方的介绍：
AMap-Vue 是一个基于 Vue.js 的高德地图 AMap JSAPI 封装。
通过它，你能够以近似普通 UI 组件的方式来开发地图应用，而无需关心 AMap 的具体操作。
链接：https://jimnox.gitee.io/amap-vue/intro/
话不多说 上代码
1.安装依赖
yarn add @amap/amap-vue@^1.4.0 # 或 npm install --save @amap/amap-vue@^1.4.0
2.在mian.js里引入
一般我们会配合 element-ui UI或者 其他UI来进行开发
import AmapVue from "@amap/amap-vue"; AmapVue.config.version = "2.0"; // 默认2.0，这里可以不修改 AmapVue.config.key = ""; // 需要在高德地图里创建 自己的key AmapVue.config.plugins = [ "AMap.ToolBar", "AMap.MoveAnimation", "AMap.Autocomplete", //输入提示插件 "AMap.PlaceSearch", //POI搜索插件 "AMap.Scale", //右下角缩略图插件 比例尺 "AMap.OverView", //地图鹰眼插件 "AMap.ToolBar", //地图工具条 "AMap.MapType", //类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制 "AMap.PolyEditor", //编辑 折线多，边形 "AMap.CircleEditor", //圆形编辑器插件 "AMap.Geolocation", //定位控件，用来获取和展示用户主机所在的经纬度位置 // 在此配置你需要预加载的插件，如果不配置，在使用到的时候会自动异步加载 ]; Vue.use(AmapVue);
2.amap的实例使用
<amap> <amap-info-window :position="position" :vislble="visible" is-custom> <div>content of this info window</div> </amap-info-window> </amap>
3.使用地图的工具和更改主题的颜色
//:zoom="map.zoom" 默认的缩放级别 //map-style 主题颜色的修改 如果是自定义的地图 主题 需要配置安全秘钥 securityJsCode <amap :center="map.center" :zoom="map.zoom" map-style="amap://styles/whitesmoke"> </amap>
总结 AMap-Vue 组件封装了对应 AMap 组件的大部分属性和方法我们在使用的过程中通俗易懂，也有很多实例的项目文档 例如我们常用的 数据聚合 电子围栏 等。。。
以上就是关于 amap-vue的基本使用 如有其他问题 评论/私信
