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之前，明天再看一下