react 引入百度地图 图标自定义

项目首页需要引入百度地图，根据需要点击地图上的标记点显示弹框，并且根据数据显示标记点的样式，下面附上代码：

    //初始化地图
    componentDidMount() {
       this.initMap(filterData);
    }
    initMap = (data, level = 5, num1 = 116.413369, num2 = 39.910836) => {
    const { BMap, BMAP_STATUS_SUCCESS } = window;
    let points = data;
    let map = new BMap.Map("allmap"); // 创建Map实例
    map.centerAndZoom(new BMap.Point(num1, num2), level);
    let top_left_control = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_TOP_LEFT });// 左上角，添加比例尺
    let top_left_navigation = new BMap.NavigationControl();
    let top_right_navigation = new BMap.NavigationControl({
      anchor: BMAP_ANCHOR_TOP_RIGHT,
      type: BMAP_NAVIGATION_CONTROL_SMALL
    });
    if (level !== 5) {
      let geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(function (r) {
        if (this.getStatus() === BMAP_STATUS_SUCCESS) {
          map.panTo(r.point);
        }
      }, { enableHighAccuracy: true })
    }
    map.addControl(top_left_control);
    map.addControl(top_left_navigation);
    // map.addControl(top_right_navigation);
    map.enableScrollWheelZoom(true);
    this.addMarker(map, points, 'init', false);
  };
      //循环建立标注点
    addMarker = (map, points, key = undefined, iconFlag, check = undefined) => {

    if (!!key && key === 'query') {
      let allOverlay = map.getOverlays();
      allOverlay.forEach(i => {
        map.removeOverlay(i);
      })
    }
    // 这边是根据业务来处理数据 自行修改
    for (let i = 0, pointsLen = points.length; i < pointsLen; i++) {
      let s = [];
      if (points[i].coordinate) {
        s = points[i].coordinate
      } else {
        for (let k = 0; k < CITYPOSITION.length; k++) {
          if (points[i].area) {
            if (CITYPOSITION[k].name == points[i].area) {
              s = `(${CITYPOSITION[k].latitude},${CITYPOSITION[k].longitude})`;
              break;
            }
          } else {
            s = "(39.915156,116.403981)";
          }
        }
      }
      //  没值的话就默认一个地点
      if (s.trim() === "" || s.trim() === "()") {
        s = "(116.403981,39.915156)";
      }

      if (s.indexOf("(") <= -1) continue;
      s = s.replace('(', '').replace(')', '');
      let coordinate1 = null;
      let coordinate2 = null;

      if (points[i].coordinate) {
        coordinate1 = s.split(',')[0].trim();
        coordinate2 = s.split(',')[1].trim();
      } 


      let point = new BMap.Point(coordinate1, coordinate2); //将标注点转化成地图上的点
      let myIcon = null;
      // 自定义图标点的样式 可以阿里图标库去下载
      if (!points[i].coordinate) {
        myIcon = new BMap.Icon(require('../../assets/map/point/positionBlue.png'), new BMap.Size(19, 25));
      } else {
        myIcon = new BMap.Icon(require('../../assets/map/point/redPosition.png'), new BMap.Size(19, 25));
      }
      let label = undefined
      if (points[i].coordinate) {
        label = new BMap.Label(points[i].name, {
          offset: new BMap.Size(18, -3),   //内容偏移量+  标注点显示的标题
        });
        label.setStyle({ border: 'none', fontSize: "5px", backgroundColor: 'rgba(156,156,156,0.3)' });
      }

      let marker = undefined
      marker = new BMap.Marker(point, { icon: myIcon }); //将点转化成标注点 第二个参数为undefined的时候就是默认的实心红色图标
      map.addEventListener("zoomend", function () {
        // console.log("地图缩放至："+this.getZoom()+"级");
        // if (this.getZoom() >= 3) {
        if (marker.getLabel()) {
          marker.getLabel().setStyle({ border: 'none', fontSize: "5px", backgroundColor: 'rgba(156,156,156,0.3)', display: 'block' })
        }
        marker.setLabel(label)
      });

      map.addOverlay(marker);  //将标注点添加到地图上
      //添加监听事件
      let thePoint = points[i];
      // 点击图标出现的默认样式弹窗
      marker.addEventListener('click',
        function () {
          if (points[i].coordinate) {
            let opts = {
              width: 310,     // 信息窗口宽度
              height: 258,     // 信息窗口高度
            };
            let taskIds = thePoint.taskIds;
            const keys = [];
            for (let i in taskIds) {
              keys.push(i);
            }

            const { checkTypeList } = this.state;
            let d = keys.indexOf('定期检测') > -1;
            if (d) {
              if (checkTypeList.indexOf('定期检测') <= -1) {
                d = false;
              }
            }
            let sContent =
              '<div style="margin:0 0 5px 0;padding:0.2em 0">' +
              '<div style="height: 30%"><div>' + thePoint.name + '' + (thePoint.rangeName ? ('(' + thePoint.rangeName + ')') : '') + '</div>' +
              '<div>' + points[i].type_first + '' + (thePoint.route_code ? ('/' + thePoint.route_code) : '') + '' + (thePoint.center_stake_code ? ('/' + thePoint.center_stake_code) : '') + '</div></div>' +
              '<div>' +
              '<div style="width: 50%;display: inline-block;margin-top: 20px">' +
              '<img style="width: 51px;height: 51px" src="' + image2 + '"/><button style="margin-left: 10px;border: none" id="base" ' +
              'value="' + thePoint.bridge_id + '#' + thePoint.task_id + '#' + thePoint.name + '#' + thePoint.rangeName + '#' + thePoint.type_first + '#' + thePoint.type_second + '">基本信息</button></div>' +

              (d ?
                '<div style="width: 50%;display: inline-block;margin-top: 20px">' +
                '<img style="width: 50px;height: 45px" src="' + image1 + '"/><button style="margin-left: 10px;border: none" id="check" ' +
                'value="' + thePoint.bridge_id + '#' + taskIds['定期检测'] + '#' + thePoint.name + '#' + thePoint.rangeName + '#' + thePoint.type_first + '#' + thePoint.center_stake_code + '#' + thePoint.type_second + '#' + thePoint.create_time + '">定期检测</button></div></div>' : '') +

            
            let infoWindow = new BMap.InfoWindow(sContent, opts); //创建信息窗口对象
            infoWindow.addEventListener('open', function () {

              const base = document.getElementById('base');
              const value = base.value;
              //基本信息
              base.addEventListener('click', function () {
                const params = {
                  id: value.split('#')[0],
                  name: value.split('#')[2],
                  rangeName: value.split('#')[3],
                  type_first: value.split('#')[4],
                  type_second: value.split('#')[5],
                };
                this.setState({
                  baseInfoVisible: true,
                  bridgeRecord: params,
                  taskId: value.split('#')[1],
                });
              }.bind(this));

              //定期检查
              if (d) {
                const check = document.getElementById('check');
                const checkValue = check.value;
                check.addEventListener('click', function () {
 
                   
                  });
                }.bind(this));
              }



            }.bind(this));
            marker.openInfoWindow(infoWindow);
          } else {
            let kk = [], pp = []
            kk = this.groupBy(points, function (item) {
              return [item.area];//按照name进行分组
            });
            kk.forEach(item => {
              if (points[i].area) {
                if (item[0].area == points[i].area) pp = item
              } else {
                if (item[0].area == "北京市/东城区") pp = item
              }
            })
            console.log(kk)
            console.log(pp)
            this.setState({
              dataBridgeNoPosition: pp,
              bridgeNoPositionVisible: true
            })
          }

        }.bind(this));
    }

    this.setState({
      map,
    })
  };
    

大部分都是公司前人写的 我加了一些逻辑修改 在这里记录一下 biubiubiubiu········