高德地图 API 开发 amap-vue

标题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的基本使用 如有其他问题 评论/私信