Gaode map API development amap-vue

The title amap-vue is a plug-in for the second package of Gaode map, which is suitable for vue

• The official introduction of amap-vue:
  AMap-Vue is a Vue.js-based encapsulation of AMap JSAPI for Gaode map.
  Through it, you can develop map applications in a way similar to common UI components without caring about the specific operations of AMap.
  Link: https://jimnox.gitee.io/amap-vue/intro/
  Not much to say about the code

1. Install dependencies

yarn add @amap/amap-vue@^1.4.0 # 或 npm install --save @amap/amap-vue@^1.4.0

2. Introduce in 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. Example use of amap

<amap>
  <amap-info-window :position="position" :vislble="visible" is-custom>
    <div>content of this info window</div>
  </amap-info-window>
</amap>

3. Use map tools and change theme colors

//:zoom="map.zoom" 默认的缩放级别   
//map-style 主题颜色的修改 如果是自定义的地图 主题 需要配置安全秘钥 securityJsCode

 <amap :center="map.center" :zoom="map.zoom" map-style="amap://styles/whitesmoke">
 </amap>

Summary The AMap-Vue component encapsulates most of the properties and methods of the corresponding AMap component. We are easy to understand during the use process, and there are also many example project documents, such as our commonly used data aggregation electronic fence. . .
The above is about the basic use of amap-vue. If you have any other questions, please comment/private message