接口返回的数组对象里 再每个对象里面添加新字段

109 阅读1分钟

接口返回的数组对象里 再每个对象里面添加新字段

this.points.forEach(r => {
         r.imageUrl = "";
       });
       
       
       

地图上循环的坐标 点击出现对应的信息

1660570561791.png

1660570581915.png

1660570625894.png

// 初始化首页地图
    initMap() {
      BaiduMap.init().then(BMap => {
        // console.log("地图初始化");
        map = new BMap.Map("home-map"); // 创建Map实例
        // var marker = new BMap.Marker(new BMap.Point(this.lng, this.lat)); // 设置地图显示的城市 此项是必须设置的
        // 多个循环添加
        this.toggleMapTheme();
        if (this.points.length > 0) {
          console.log(1111);
          map.centerAndZoom(
            new BMap.Point(this.points[0].lng, this.points[0].lat),
            10
          ); // 初始化地图,设置中心点坐标和地图级别
        } else {
          map.centerAndZoom("南京", 16); // 初始化地图,设置中心点坐标和地图级别
        }
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
        map.enableInertialDragging(true); //开启拖拽
        this.addMaker(this.points);
      });
    },
    // 添加标注
    addMaker(points) {
      points.forEach(item => {
        let image = "";
        if (item.type === 3) {
          // image = fireroomImg;
          this.imgeList = fireroomImg;
          // item.imageUrl = fireroomImg;
          // console.log(item.imageUrl);
        } else if (item.type === 2) {
          // image = hydrantImg;
          this.imgeList = hydrantImg;
          // nb消火栓的图片
        } else if (item.type === 4) {
          // image = errImg;
          this.imgeList = abnormImg;
        } else {
          // image = companyImg;
          this.imgeList = companyImg;
        }
        let icon = {
          icon: new BMap.Icon(this.imgeList, new BMap.Size(40, 50))
        };
        let marker = new BMap.Marker(new BMap.Point(item.lng, item.lat), icon);

    marker.setTitle(item.name);
    marker.type = item.type;
    marker.companyId = item.companyId;
    marker.dangerLevel = item.dangerLevel;
    // 添加点击事件
    marker.addEventListener("click", e => {
      this.markerClick(e);
    });
    map.addOverlay(marker);
  });
  // map.setViewport(point);
},
// 添加点击事件
markerClick(e) {
  let target = e.target.point;
  map.centerAndZoom(new BMap.Point(target.lng, target.lat), 16);
   if (e.target.type === 3) {
    this.showCompanyDetail = false;
    this.fireList = false;
    this.fireListNB = false;
  
    this.fireStationDetail = true;
    minifirestation(e.target.companyId).then(res => {
      this.fireStationData = res.data;
    });
  }