React封装地图（百度地图）组件，学废了

百度地图的引用安装ak啥的，我觉得只要从事前端就一定知道，所以不说了。

组件内还改了地图的icon，修改了样式，如果有需要可以私聊我

话不多说 直接上代码

import React, { PureComponent } from 'react';
import Styles from './index.css'; //只是百分百显示
import "./dumap.css"  //样式文件
import styleJson from './styleJson'
import u65 from '../../assets/imgTran/u150.png'
export default class BaiDuMap extends PureComponent {


  constructor(props) {
    super(props);
    this.map = null;
  }

  componentDidMount() {
    const { point: [lng, lat], mapData } = this.props;
    const [defaultLng, defaultLat] = [103.83, 36.05];
    var myIcon = new BMapGL.Icon(u65, new BMapGL.Size(30, 30), {
      anchor: new BMapGL.Size(10, 25)
    })
    this.map = new window.BMapGL.Map('box'); // 创建Map实例
    this.map.centerAndZoom(new window.BMapGL.Point(lng || defaultLng, lat || defaultLat), 13); // 初始化地图,设置中心点坐标和地图级别
    this.map.enableScrollWheelZoom(true);
    this.map.clearOverlays();
    this.map.setMapStyleV2({ styleJson })
    mapData.forEach(element => {
      if (element.locationLongitude && element.locationLatitude) {
        if (element.id == 0) {
          const marker = new window.BMapGL.Marker(new window.BMapGL.Point(element.locationLongitude || defaultLng, element.locationLatitude), { icon: myIcon });
          this.map.addOverlay(marker);
          this.markerPoint(marker, element)
        }
      }

    });
  }

  componentDidUpdate() {
    const { mapData } = this.props;
    this.map.clearOverlays();
    mapData.forEach(element => {
      if (element.locationLongitude && element.locationLatitude) {
        const marker = new window.BMapGL.Marker(new window.BMapGL.Point(element.locationLongitude, element.locationLatitude));
        this.map.addOverlay(marker);
        this.markerPoint(marker, element)
      }

    });
  }

  //   通过数据标记点并且弹出信息框信息
  markerPoint = (marker, info) => {
    // 创建信息窗口background:#02a7f0;
    const opts = {
      width: 200,
      height: 100,
      title: `任务编号：${info.facilityName}`
    };

    const sContent = `<div>
      <div style='font-size:13px;'>
        信息来源：${info.area}
      </div>
      <div style='font-size:13px;'>
        任务等级：${info.maintenanceUnit}
      </div>
      <div style='font-size:13px;'>
        上报时间：${info.maintenanceUnit}
      </div>
      <div style='font-size:13px;'>
        指派人：${info.maintenanceUnit}
      </div>
    </div>`;
    const infoWindow = new window.BMapGL.InfoWindow(sContent, opts);
    // eslint-disable-next-line func-names
    marker.addEventListener('click', function () {
      this.openInfoWindow(infoWindow); // 开启信息窗口
    });
  }

  render() {
    return <div id="box" className={Styles.box} />;
  }
}

用法

//引用
import BaiDuMap from '@/components/BaiDuMapTranscript';
//使用
<BaiDuMap point={[116.2317, 39.5427]} mapData={mapData} />
//数据格式
let mapData = [
      {
        locationLongitude: 116.2317,
        locationLatitude: 39.5429,
        area: '北京',
        maintenanceUnit: '三只羊网络',
        facilityName: 'RW3255654453432',
        id: 0,
      }
    ]

效果