定位+点击改变覆盖物

地图定位点击改变覆盖物

具体实现

    <button @click="ready">我的位置</button>
    <div id="allmap"></div>

记得在js里引入import BMap from 'BMap';
也可以引入外部图片import imgIcon from '../assets/img/icon/map_icon.png';

    ready(){
      let that=this;
      let geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(function(r){
        // 获取当前坐标
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
          // 创建地图
          let map = new BMap.Map("allmap");
          let point = new BMap.Point(r.point);
          map.centerAndZoom(point,15);
          map.enableScrollWheelZoom(true);//开启滚动
        
          // 创建覆盖物
          var mk = new BMap.Marker(r.point); // 覆盖物的位置，在定位处
          let icon = new BMap.Icon(imgIcon,new BMap.Size(20,22)); // 覆盖物的大小
          map.addOverlay(mk); //在地图上添加覆盖物
          map.panTo(r.point);

          //地图监听事件
          map.addEventListener('click', function (e) {
            map.removeOverlay(mk); // 移除定位的红色覆盖物
            mk = new BMap.Marker(e.point,{icon:icon}); // 在鼠标点击的位置创建新的覆盖物
            map.addOverlay(mk); // 在地图上添加覆盖物
          });
        }else {alert('failed'+this.getStatus());}
      });
    }