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：地圖上綁定的事件

將上邊的參數配置好以後你就能夠看到一個地圖了。