image.png
安裝
npm install vue-amap --save
main.js配置
//vue-amap地圖
import VueAMap from 'vue-amap'
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
key: '1959b432192b52554e996fe8764917c8',
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
// 默認(rèn)高德 sdk 版本為 1.4.4
// v: '1.4.4',
uiVersion: '1.1.1'// ui版本號 如果要用UI組件直接在此處添加使用的版本號就可以了违帆，不用的話改為上句
// 因為下面我要用的點坐標(biāo)樣式需要更改韩玩，因此用了UI組件
});
vue文件中
這里有兩種方法追驴，一個是vue組件ui骗灶，也就是官方方法https://elemefe.github.io/vue-amap/#/zh-cn/introduction/ui-component
不過我按照官方文檔，要實現(xiàn)我自己的需求有些困難图张，主要是我太菜了。下面我用的是js的api。注意js2.0的api需要搭配1.1的ui組件佛嬉，不是官方示例的1.0。
<template>
<div id="container"></div> <-- 地圖的容器 </-->
</template>
<script>
export default {
data () {
return {
//地圖相關(guān)
zoom: 5,
iconTheme: 'default',
iconSOS: 'red',
iconWarning: 'orange',
iconNotHad: 'green',
iconHad: 'blue',
center: [121.69996, 31.197646],
//坐標(biāo)數(shù)據(jù)
testSOS:[[121.59996, 32.197646],[112.49996, 33.197646]],
testWarning:[[116.305285, 27.904989],[113.505285, 39.904989]],
testHad:[[115.59996, 21.197646],[121.69996, 31.197646]],
testNotHad:[[121.59996, 29.197646],[118.69996, 31.197646]],
}
},
mounted() {
// this.$nextTick(function(){ //AMap is not defined
// this.initMap();
// });
setTimeout(this.initMap,500);
},
methods: {
initMap() {
//map
var map = new AMap.Map('container', {
zoom: this.zoom,
center: this.center,
});
//標(biāo)注點
AMapUI.loadUI(['overlay/SimpleMarker'], (SimpleMarker) => { //箭頭函數(shù)聲明才可訪問data
//SOS
for(var i=0;i<this.testSOS.length;i++){
var temp=[];
temp.push(this.testSOS[i][0]);
temp.push(this.testSOS[i][1]);
//創(chuàng)建SimpleMarker實例
new SimpleMarker({
//圖標(biāo)主題
iconTheme: this.iconTheme,
//背景圖標(biāo)樣式
iconStyle: this.iconSOS,
//...其他Marker選項...闸天，不包括content
map: map,
position: temp
});
}
//其他異常
for(var i=0;i<this.testWarning.length;i++){
var temp=[];
temp.push(this.testWarning[i][0]);
temp.push(this.testWarning[i][1]);
new SimpleMarker({
iconTheme: this.iconTheme,
iconStyle: this.iconWarning,
map: map,
position: temp
});
}
//無設(shè)備用戶
for(var i=0;i<this.testNotHad.length;i++){
var temp=[];
temp.push(this.testNotHad[i][0]);
temp.push(this.testNotHad[i][1]);
new SimpleMarker({
iconTheme: this.iconTheme,
iconStyle: this.iconNotHad,
map: map,
position: temp
});
}
//有設(shè)備用戶
for(var i=0;i<this.testHad.length;i++){
var temp=[];
temp.push(this.testHad[i][0]);
temp.push(this.testHad[i][1]);
new SimpleMarker({
iconTheme: this.iconTheme,
iconStyle: this.iconHad,
map: map,
position: temp
});
}
});
//縮放控件
AMapUI.loadUI(['control/BasicControl'], function(BasicControl) {
var zoomCtrl = new BasicControl.Zoom({
position: 'br',
showZoomNum: true
});
map.addControl(zoomCtrl);
});
},
}
}
</script>
圖例卡片是自己加的暖呕，這樣最方便簡單了，想要什么樣式就寫什么樣式号枕。
*目前還是沒有弄清楚缰揪，為什么在mounted或者$nextTick當(dāng)中"AMap is not defined"，下面的定時器能解決葱淳，看起來是掛載之類的問題钝腺，但我的vue.use()確實在new vue之前，明天再看一下
