效果如下

效果说明：点击网页中摸一个按钮的时候对应的标注点放大

实现方法

实现的整体思路是当鼠标点击按钮的时候，首先执行的是去除地图上所有的标注，并且将页面上所有标注的active设置为false（标注的active为true则表示为该标注以放大形式显示），然后将点击按钮所对应的坐标中active设置为true，最后绘制所有点的坐标

1.global.vue用于存放全局变量，这里的数据就直接放在global.vue中

let siteList = {'trip': {'positions': [{// 长沙的经纬度lng: 112.945358,lat: 28.234451,active: false},{// 武汉的经纬度lng: 114.311754,lat: 30.598604,active: false}]},'eat': {}}

2.javascript函数分别实现去除所有标注点、添加一个标注点、添加多个标注点

// 去除地图上所有的标注removeAllMarker: function (map, markerArr) {//markerArr是用于保存标注点的全局变量，在下面removeOverlay中要用到for (let proprty in this.GLOBAL.siteList) {let site = this.GLOBAL.siteList[proprty]if(site.hasOwnProperty('positions')){for (let i = 0; i < site.positions.length; i++) {site.positions[i].active = false}}}for (let i = 0; i < markerArr.length; i++) {map.removeOverlay(markerArr[i])}},// 在地图上添加一个标注markerFun: function (map, point, iconType) {//iconType是地图标注点的样式let marker = new BMap.Marker(point, {icon: iconType})this.GLOBAL.markerArr.push(marker)map.addOverlay(marker)},//在地图上添加多个标注multMarker: function (obj) {for (let property in obj) {if (obj[property].hasOwnProperty('positions')) {let positions = obj[property].positionsfor (let i = 0; i < positions.length; i++) {// 创建坐标点let points = new BMap.Point(positions[i].lng, positions[i].lat)//判断该标注是否是activeif (positions[i].active) {this.markerFun(this.GLOBAL.map, points, this.GLOBAL.icon1Active)} else {this.markerFun(this.GLOBAL.map, points, this.GLOBAL.icon1)}}}}},