vue2.X对接高德地图：vue-amap（一）

最近开启新的项目：要求对接高德地图，并在Vue的基础上。

通过在网上查找，发现了还可以的组件：vue-amap。在这附上官方文档一份

下载vue-amap

npm install vue-amap --save

引入vue-amap

import VueAMap from 'vue-amap';

Vue.use(VueAMap);

VueAMap.initAMapApiLoader({
  key: 'your amap key',
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
  // 默认高德 sdk 版本为 1.4.4
  v: '1.4.4'
});

在这里，你需要在高德开发平台上注册自己应用程序并且生成KEY

而在plugin中写入你要用到的方法，这里只是一部分，AMap.Geolocatio/*获取当前定位*/、AMap.LngLat/*将数组转化为定位数据*/、AMap.Geocoder/*逆地理编码*/···

这里就不一一列举了，后边我会说一下我用到的一些写法以及坑。

写法：

<el-amap ref="map" vid="amapDemo" :center="center" :zoom="zoom" :plugin="plugin" :events="events" class="amap-demo">
</el-amap>

vid：地图容器节点的ID

 center：地图中心坐标值

zoom：地图放大倍数

events：地图上绑定的事件

将上边的参数配置好之后你就可以看到一个地图了。