React + 百度地图实现根据经纬度数据显示定位点。

项目中需要根据经纬度数据将定位点显示在地图上，使用百度地图实现。
最终效果如下，如果满足你的需求，可以继续往下看一看。
本人非专业前端，做的不好，还希望指出问题所在。

 

首先在public中的index.html中引入如下ak后是你自己的密钥。

    <!-- BMapGL 样式文件 -->
    <link rel="stylesheet" type="text/css" href="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的密钥"/>
 
    <!-- BMapGL JavaScript 文件 -->
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=你的密钥"></script>

代码如下：

import { useEffect, useState } from "react";
import {getGeoCoordinates,getRegionCodeByAgentId} from '../../../api/map';
import {Button} from "antd";
import {useNavigate} from "react-router-dom";
const BMapGL = window.BMapGL;
const TrackDetailMap = () => {
const [coordinates, setCoordinates] = useState([]);
const navigate = useNavigate();
  useEffect(() => {
    if (sessionStorage.getItem('accountRole') == 0) {
      getGeoCoordinates({
        sheng:null,
        orderRegionCode:null
      }).then(res => {
        if (res.code === 1) {
            // 创建百度地图实例
            var map = new BMapGL.Map("allmap");
            // 设置地图中心点和缩放级别
            var center = new BMapGL.Point(104.067923, 35.501268); // 中国地图的中心经纬度
            map.centerAndZoom(center, 5);
            map.enableScrollWheelZoom(true);
        } else {
          setCoordinates(prevCoordinates => [...prevCoordinates, ...res.data.map(data => data.value)]);
        }
      })
    } else {
      getRegionCodeByAgentId(sessionStorage.getItem('agentId')).then(res => {
        if (res.code == 0) {
          getGeoCoordinates({
            sheng:null,
            orderRegionCode:res.data
          }).then(res => {
            if (res.code === 1) {
              // 创建百度地图实例
              var map = new BMapGL.Map("allmap");
              // 设置地图中心点和缩放级别
              var center = new BMapGL.Point(104.067923, 35.501268); // 中国地图的中心经纬度
              map.centerAndZoom(center, 5);
              map.enableScrollWheelZoom(true);
            } else {
              setCoordinates(prevCoordinates => [...prevCoordinates, ...res.data.map(data => data.value)]);
            }
          })
        }
      })
     
    }
  }, []);

  useEffect(() => {
    if (coordinates.length === 0) return;
  
    // 创建百度地图实例
    var map = new BMapGL.Map("allmap");
  
    // 创建百度地图点集合
    var baiduPoints = [];
  
    // 转换经纬度坐标为百度坐标系
    const convertCoordinates = async () => {
      for (let i = 0; i < coordinates.length; i++) {
        const coord = coordinates[i];
        const point = new BMapGL.Point(coord[1], coord[0]); // 注意经纬度的顺序
        const convertedPoint = await convertCoordToBaidu(point);
        baiduPoints.push(convertedPoint);
      }
  
      // 设置地图中心点和缩放级别
      var center = new BMapGL.Point(104.067923, 35.501268); // 中国地图的中心经纬度
      map.centerAndZoom(center, 5);
      map.enableScrollWheelZoom(true);
  
      // 添加定位点
      baiduPoints.forEach((point) => {
        const marker = new BMapGL.Marker(point);
        // 为每个点添加点击事件监听器
        marker.addEventListener('click', () => {
          // 移动地图到点击的点位并放大
          map.centerAndZoom(point, 21); // 移动地图中心到点击的点位并设置缩放级别为最大
        });
        map.addOverlay(marker);
      });
    };
  
    // 异步函数，将经纬度坐标转换为百度坐标系
    const convertCoordToBaidu = async (point) => {
      return new Promise((resolve, reject) => {
        var convertor = new BMapGL.Convertor();
        convertor.translate([point], 1, 5, (data) => {
          if (data.status === 0) {
            resolve(data.points[0]);
          } else {
            reject(new Error("坐标转换失败"));
          }
        });
      });
    };
  
    convertCoordinates();
  
  }, [coordinates]);
  // 点击返回按钮时触发导航到另一个页面
  const handleBackClick = () => {
    navigate('/layout/map');
  }
  return(
  
    <div>
        <div id="allmap" style={{ width: "100%", height: "500px" }}></div>
        <Button 
                onClick={handleBackClick}
                style={{
                  position: 'absolute',
                  top: '68px',
                  left: '240px',
                  zIndex: '999',
                  margin: '10px' // 设置外边距，可以根据需要调整数值
                }}
              >返回</Button>
    </div>
    
  );
};

export default TrackDetailMap;

相关代码解释： 
下图中因为传入的经纬度数据不是百度需要的坐标系，所以转换一下，不转换位置偏差特别大。

说明因为收集数据的时候使用的是高精度经纬度数据收集器，所以收到的数据格式为：
[[北纬,东经],[北纬,东经]] 这样的数据结构。
所以用new BMapGL.Point(coord[1], coord[0]);掉换了一下数据。
[[东经,北纬],[东经,北纬,]] 这样的数据结构new BMapGL.Point(coord[0], coord[1]);应该就行

点击地图上的点位后：

可以用鼠标滚轮缩小查看：