引入百度地图插件

  1. <script src="https://api.map.baidu.com/api?v=3.0&type=webgl&ak=申请的key&s=1"></script>

添加 ts 类型

  1. declare const BMapGL: any

实现

  1. import { useEffect, useRef } from 'react';
  3. export default () => {
  4.   const mapRef = useRef<any>(null);
  6.   const creatMarker = (list: { gps: number[]; title: string; icon: string }[]) => {
  7.     mapRef?.current?.clearOverlays(); // 先清除后创建，适用于切换
  8.     list?.forEach((item) => {
  9.       // 创建图标
  10.       const myIcon = new BMapGL.Icon(item.icon, new BMapGL.Size(40, 50), {
  11.         anchor: new BMapGL.Size(20, 50),
  12.       });
  14.       // 创建Marker标注，使用图标
  15.       const point = new BMapGL.Point(item.gps[0], item.gps[1]);
  16.       const marker = new BMapGL.Marker(point, {
  17.         icon: myIcon,
  18.       });
  20.       // 点标记添加点击事件
  21.       const infoWindow = new BMapGL.InfoWindow(item, {
  22.         width: 200,
  23.         height: 100,
  24.         title: item.title,
  25.       });
  26.       marker.addEventListener('click', () => {
  27.         mapRef.current.openInfoWindow(infoWindow, point); // 开启信息窗口
  28.       });
  30.       // 将标注添加到地图
  31.       mapRef.current.addOverlay(marker);
  32.     });
  33.   };
  35.   // 设置行政区划
  36.   const getBoundary = () => {
  37.     const bdary = new BMapGL.Boundary();
  38.     bdary.get('东阳', (rs: any) => {
  39.       // 获取行政区域
  40.       const count = rs.boundaries.length; // 行政区域的点有多少个
  41.       if (count === 0) {
  42.         console.log('未能获取当前输入行政区域');
  43.         return;
  44.       }
  45.       let pointArray: any[] = [];
  46.       for (let i = 0; i < count; i += 1) {
  47.         const ply = new BMapGL.Polygon(rs.boundaries[i], {
  48.           strokeWeight: 2,
  49.           strokeColor: '#ff0000',
  50.         }); // 建立多边形覆盖物
  51.         mapRef.current.addOverlay(ply); // 添加覆盖物
  52.         pointArray = pointArray.concat(ply.getPath());
  53.       }
  54.       mapRef.current.setViewport(pointArray); // 调整视野
  55.     });
  56.   };
  58.   const creatMap = () => {
  59.     mapRef.current = new BMapGL.Map('my-map');
  60.     mapRef.current.enableScrollWheelZoom(true);
  61.     mapRef.current.centerAndZoom(new BMapGL.Point(120.325301, 29.159552), 16);
  62.     // mapRef.current.setMapStyleV2({ styleJson }); // 设置地图主题 https://lbsyun.baidu.com/apiconsole/custommap
  63.     creatMarker([
  64.       {
  65.         title: '标记一',
  66.         icon: 'https://xxx.png',
  67.         gps: [120.3202894172981, 29.1566923548061],
  68.       },
  69.       {
  70.         title: '标记二',
  71.         icon: 'https://xxx2.png',
  72.         gps: [120.3202894177781, 29.1566966648061],
  73.       },
  74.     ]);
  75.     // getBoundary();
  76.   };
  78.   useEffect(() => {
  79.     creatMap();
  80.   }, []);
  82.   return <div id="my-map" style={{ width: 500, height: 500 }} />;
  83. };

方法

如何清除地图上的覆盖物？

清除地图上所有的标记，用 map.clearOverlays();
清除单个标注 iMarker，用 map.removeOverlay(iMarker);
显示和隐藏自定义覆盖物，可以继承 overlay 的 hide(); 或者 show() 方法。

  1. // 创建 Marker 标注
  2. const point = new BMapGL.Point(it.GPS[0], it.GPS[1]);
  4. const marker = new BMapGL.Marker(point, {
  5.   icon: 'https://xxx.png',
  6. });
  8. // 隐藏、显示 marker
  9. marker.hide();
  10. marker.show();