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

TechCodeAI启航

已于 2024-05-29 15:18:00 修改

阅读量726

点赞数

文章标签： react.js 前端 javascript

于 2022-11-10 15:12:20 首次发布

本文链接：https://blog.csdn.net/weixin_54165147/article/details/127789301

版权

该博客介绍了如何在React应用中集成百度地图，包括创建Map实例、自定义图标、设置地图样式以及在地图上添加信息标记点。提供了详细的代码示例，展示了如何根据数据动态更新地图上的标记，并在点击标记时弹出信息窗口展示详细信息。

摘要由CSDN通过智能技术生成

🐱 个人主页：TechCodeAI启航，公众号：SHOW科技

🙋‍♂️ 作者简介：2020参加工作，专注于前端各领域技术，共同学习共同进步，一起加油呀！

💫 优质专栏：前端主流技术分享

📢 资料领取：前端进阶资料可以找我免费领取

🔥 摸鱼学习交流：我们的宗旨是在「工作中摸鱼，摸鱼中进步」，期待大佬一起来摸鱼！

百度地图的引用安装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,
      }
    ]

效果