VUE使用地圖組件

vue-amap使用
1、下載：

npm install vue-amap --save

2、使用：(在 main.js中)

import VueAMap from 'vue-amap';
Vue.use(VueAMap);
// 初始化vue-amap
VueAMap.initAMapApiLoader({
  // 高德的key
  key: 'YOUR 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'
});

3、地圖中心點： 加圖標

<el-amap class="amap-box" :zoom="zoom" :center="center" :mapStyle="mapStyle">
    <el-amap-marker :position="[108.386284,21.727592]" :icon="icon"></el-amap-marker>
</el-amap>

// 導入 地點圖標覆蓋物
import img from '../assets/logo.png'

// data數據
data() {
      return {
        center: [108.386284,21.727592],//地圖中心點坐標
        zoom:16,//初始化地圖顯示層級
        mapStyle: "amap://styles/8b6be8ec497009e17a708205348b899a", //設置地圖樣式
        icon: l
      }
},

然后就可以啦啦啦啦啦啦