百度地图marker点击切换icon

     项目使用vue做的,直接上代码

//引入的图标

import iconCar from "../assets/icon_yongyou_green.gif";
import iconCars from "../assets/icon_yongyou_red.gif";
import iconclick from "../assets/yellow.gif";
import underline from "../assets/underline.png";

    baiduMap() {

     var map = new BMap.Map("allmap");
      var point = new BMap.Point(113.636523, 34.754674);
      map.setCurrentCity("郑州");
      map.centerAndZoom(point, 12);
      map.enableScrollWheelZoom(true);
      window.map = map;

     //个性化地图设置
      map.setMapStyleV2({
        styleId: "96a0c585e08a7bf069d67c32a7cd6f6f",
      });

    //拿到数据进行循环
      this.list1.forEach((item, i) => {
        let obj = {
          lon: item.v_lon,
          lat: item.v_lat,
        };
        this.points.push(obj);

  //根据条件筛选进行显示自定义标注点的图标
        if (item.timeOut == "1") {
          var youyongImg = underline;
        } else {
          if (item.v_if_alarm != 2) {
            var youyongImg = iconCar;
          } else {
            var youyongImg = iconCars;
          }
        }
        var myIcon = new BMap.Icon(youyongImg, new BMap.Size(30, 22));
        var point = new BMap.Point(this.points[i].lon, this.points[i].lat);
        var marker = new BMap.Marker(point, { icon: myIcon }); // 创建标注

//给标注点添加数字序号
        var label = new BMap.Label(item.v_serial_number, {
          offset: new BMap.Size(5, -10),
        });
        marker.setLabel(label);
        label.setStyle({
          border: "0",
          color: "#ffffff",
          cursor: "pointer",
          background: "none",
          fontsize: 18,
        });
        map.addOverlay(marker); // 将标注添加到地图中
      //给标注点注册点击事件
        marker.addEventListener("click", function () {
          var allOverlay = map.getOverlays();
          for (var i = 0; i < allOverlay.length; i++) {
            if (allOverlay[i].getTitle() == "监测点") {
              map.removeOverlay(allOverlay[i]);
              break;
            }
          }
          var myIcon = new BMap.Icon(iconclick, new BMap.Size(32, 25));
          var markers = new BMap.Marker(point, { icon: myIcon });
          markers.setTitle("监测点");
          map.addOverlay(markers);
        });
      });

}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值