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'],
// 默认高德 sdk 版本为 1.4.4
// v: '1.4.4',
uiVersion: '1.1.1'// ui版本号 如果要用UI组件直接在此处添加使用的版本号就可以了，不用的话改为上句
// 因为下面我要用的点坐标样式需要更改，因此用了UI组件
});
vue文件中
这里有两种方法，一个是vue组件ui，也就是官方方法https://elemefe.github.io/vue-amap/#/zh-cn/introduction/ui-component
不过我按照官方文档，要实现我自己的需求有些困难，主要是我太菜了。下面我用的是js的api。注意js2.0的api需要搭配1.1的ui组件，不是官方示例的1.0。
<template>
<div id="container"></div> <-- 地图的容器 </-->
</template>
<script>
export default {
data () {
return {
//地图相关
zoom: 5,
iconTheme: 'default',
iconSOS: 'red',
iconWarning: 'orange',
iconNotHad: 'green',
iconHad: 'blue',
center: [121.69996, 31.197646],
//坐标数据
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,
});
//标注点
AMapUI.loadUI(['overlay/SimpleMarker'], (SimpleMarker) => { //箭头函数声明才可访问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]);
//创建SimpleMarker实例
new SimpleMarker({
//图标主题
iconTheme: this.iconTheme,
//背景图标样式
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
});
}
//无设备用户
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
});
}
//有设备用户
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当中"AMap is not defined"，下面的定时器能解决，看起来是挂载之类的问题，但我的vue.use()确实在new vue之前，明天再看一下
