百度地图中点击实现标注放大

效果如下

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

实现方法

实现的整体思路是当鼠标点击按钮的时候，首先执行的是去除地图上所有的标注，并且将页面上所有标注的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].positions
          for (let i = 0; i < positions.length; i++) {
            // 创建坐标点
            let points = new BMap.Point(positions[i].lng, positions[i].lat)
            //判断该标注是否是active
            if (positions[i].active) {
              this.markerFun(this.GLOBAL.map, points, this.GLOBAL.icon1Active)
            } else {
              this.markerFun(this.GLOBAL.map, points, this.GLOBAL.icon1)
            }
          }
        }
      }
    },