vue 使用vue-amp给地图添加点标注，鼠标移入移出显示和隐藏对应的弹框

1.安装

npm install vue-amap --save

2.在main.js文件中引入

import VueAMap from 'vue-amap';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  key: '40804db8586c2c1e8fa23b7541a6ebe2',
  plugin: ['AMap.Geolocation','Geolocation','AMap.DistrictSearch'],//按需引入
  // 默认高德 sdk 版本为 1.4.4
  v: '1.4.4'
});

3.调用

 data中：

method中

加载点标注

getMarkers() {
                const markers = []
                const windows = []
                const that = this
                this.dataList.forEach((item, index) => {
                    markers.push({
                        position: item.position,
                        icon: require('../../../../assets/noneMap/water.png'),
                        events: {
                            mouseover() {//移入
                                // 方法：鼠标移动到点标记上，显示相应窗体
                                that.windows.forEach(window => {
                                    window.visible = false // 关闭窗体
                                })
                                that.window = that.windows[index]
                                that.$nextTick(() => {
                                    that.window.visible = true
                                })
                            },
                            mouseout(){//移出
                                that.windows.forEach(window => {
                                    window.visible = false // 关闭窗体
                                })
                                that.window = that.windows[index]
                                that.$nextTick(() => {
                                    that.window.visible = false
                                })
                            }
                        }
                    })
                    windows.push({
                        position: item.position,
                        isCustom: true,
                        offset: [0, -30], // 窗体偏移
                        showShadow: false,
                        visible: false, // 初始是否显示
                        name:item.name,
                        type:item.type,
                        model:item.model,
                        status:item.status
                    })

                })
                //  加点
                this.markers = markers
                // 加弹窗
                this.windows = windows
            },

 绘制行政区js：

drawBounds() {
                var that = this;
                //加载行政区划插件
                if (!that.district) {
                    //实例化DistrictSearch
                    var opts = {
                        subdistrict: 0, //获取边界不需要返回下级行政区
                        extensions: "all", //返回行政区边界坐标组等具体信息
                        level: "district", //查询行政级别为 区  市为city
                    };
                    that.district = new AMap.DistrictSearch(opts);
                }
                //循环各个市的行政区查询 *********关键性代码
                for (let i = 0; i < this.polygonss.length; i++) {
                    that.district.search(this.citys[i], function(status, result) {
                        that.polygonss[i] = [];
                        var bounds = result.districtList[0].boundaries;
                        if (bounds) {
                            for (var i = 0, l = bounds.length; i < l; i++) {
                                var polygon = new AMap.Polygon({
                                    path: bounds[i],
                                });
                                that.polygonss[i].push(polygon);
                            }
                        }
                        AMap.Polygon.bind(that.polygonss[i]);
                    });
                }

            },

最终效果图：