React 组件中使用百度地图 API，懒加载百度地图 SDK

最新推荐文章于 2024-05-16 10:00:39 发布

小弟调调

最新推荐文章于 2024-05-16 10:00:39 发布

阅读量1.2k

点赞数

分类专栏： js 前端开发文章标签： react 百度地图 hook 地图 js

本文链接：https://blog.csdn.net/jaywcjlove/article/details/103396430

版权

js 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

前端开发

8 篇文章 0 订阅

订阅专栏

这是一个基于 React 封装的百度地图组件，帮助你轻松的接入地图到 React 项目中，Gitee 镜像仓库。

文档实例预览: Github | Gitee
在这里插入图片描述

特性

♻️ 自动加载百度地图 SDK（通过创建 Script 标签的形式加载），包括第三方 SDK。
📚 使用 Typescript 编写，集成百度地图 SDK @type 声明文件（包括中文注释）。
⚛️ 支持 React Hook 新增特性（需要 React 16.8+）。
💝 不依赖任何第三方组件。

安装

不依赖 uiw 组件库

npm install @uiw/react-baidu-map --save

使用

import { Map, APILoader } from '@uiw/react-baidu-map';

const Demo = () => (
  <div style={{ width: '100%', height: '300px' }}>
    <APILoader akay="GTrnXa5hwXGwgQnTBG28SHBubErMKm3f">
      <Map />
    </APILoader>
  </div>
);
ReactDOM.render(<Demo />, _mount_);

APILoader

用于加载百度地图 SDK 依赖，加载完成，全局将会有 window.BMap 对象，这个过程是通过创建 Script 标签的形式加载。

import { APILoader } from '@uiw/react-baidu-map';

您需先申请密钥（ak）才可使用该服务，接口无使用次数限制，请开发者放心使用。

import { Map, APILoader } from '@uiw/react-baidu-map';

const Demo = () => (
  <div style={{ width: '100%', height: '300px' }}>
    <APILoader akay="GTrnXa5hwXGwgQnTBG28SHBubErMKm3f">
      <Map autoLocalCity />
    </APILoader>
  </div>
);
ReactDOM.render(<Demo />, _mount_);

PointCollection 加载海量点

表示海量点类，利用该类可同时在地图上展示万级别的点，目前仅适用于html5浏览器。

渲染海量点会耗费一定性能，应该注意不要频繁变动 point 数组

在这里插入图片描述

import { useRef, useEffect, useState } from 'react';
import { Map, PointCollection, APILoader, requireScript } from '@uiw/react-baidu-map';

const Example = () => {
  const [visiable, setVisiable] = useState(true);
  const [points, usePoints] = useState([]);
  const [position, usePositon] = useState('');
  useEffect(() => {
    if(points.length === 0) {
      requireScript('https://lbsyun.baidu.com/jsdemo/data/points-sample-data.js').then(() => {
        if(window.data && window.data.data) {
          usePoints(window.data.data);
        }
      });
    }
  });
  function compRef(props) {
    if (props && props.pointCollection) {
      console.log('pointCollection::', props.pointCollection, props.map, props.BMap);
    }
  }
  return (
    <>
      <button onClick={() => setVisiable(!visiable)}>{visiable ? '隐藏' : '显示'}</button>
      {position && <span>标注点经纬度：{position}</span>}
      <Map widget={['NavigationControl']} zoom={5}>
        <PointCollection
          ref={compRef}
          visiable={visiable}
          onClick={(e) => {
            usePositon(JSON.stringify(e.point))
          }}
          styles={{ shape: 1 }}
          points={[
            ...points
          ]}
        />
      </Map>
    </>
  )
}

const Demo = () => (
  <div style={{ width: '100%', height: '350px' }}>
    <APILoader akay="GTrnXa5hwXGwgQnTBG28SHBubErMKm3f">
      <Example />
    </APILoader>
  </div>
);
ReactDOM.render(<Demo />, _mount_);

Polyline 折线组件

使用浏览器的矢量制图工具（如果可用）在地图上绘制折线的地图叠加层。

在这里插入图片描述

import React, { useState } from 'react';
import { Map, Polyline, APILoader } from '@uiw/react-baidu-map';

const Example = () => {
  return (
    <>
      <Map zoom={13} center="北京" widget={['NavigationControl']}>
        <Polyline
          enableEditing={false}
          strokeOpacity={0.9}
          path={[
            { lng: 116.399, lat: 39.910 },
            { lng: 116.405, lat: 39.920 },
            { lng: 116.423493, lat: 39.907445 },
          ]}
        />
        <Polyline
          enableEditing={false}
          strokeOpacity={0.9}
          path={[
            { lng: 116.399, lat: 39.920977 },
            { lng: 116.385243, lat: 39.913063 },
            { lng: 116.394226, lat: 39.917988 },
            { lng: 116.401772, lat: 39.921364 },
            { lng: 116.41248, lat: 39.927893 },
          ]}
        />
      </Map>
    </>
  );
}

const Demo = () => (
  <div style={{ width: '100%', height: '350px' }}>
    <APILoader akay="GTrnXa5hwXGwgQnTBG28SHBubErMKm3f">
      <Example />
    </APILoader>
  </div>
);
ReactDOM.render(<Demo />, _mount_);