@uiw/react-baidu-map-map

Baidu Map Components for React.

Usage no npm install needed!

<script type="module">
  import uiwReactBaiduMapMap from 'https://cdn.skypack.dev/@uiw/react-baidu-map-map';
</script>

README

Map 组件

Map 组件是其他组件的基础，Map 组件会给所有的子组件注入两个属性 map，container 和 BMap，

⚠️ 注意

  1. 组件 <Map> 必须包裹在 <APILoader> 组件内，该组件作用是加载百度地图 SDK。
  2. 其他地图组件必须作为 <Map> 的子组件使用；
import { Map, useMap, APILoader } from '@uiw/react-baidu-map';
// 或者单独安装使用
import Map, { useMap, APILoader } from '@uiw/react-baidu-map-map';

基本用法

Map 的父组件必须具有宽度和高度；

import ReactDOM from 'react-dom';
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_);

小工具

百度地图上负责与地图交互的UI元素称为控件。百度地图API中提供了丰富的控件，您还可以通过 Control 类来实现自定义控件，百度控件文档。

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

const Demo = () => (
  <div style={{ width: '100%', height: '300px' }}>
    <APILoader akay="GTrnXa5hwXGwgQnTBG28SHBubErMKm3f">
      <Map
        ref={(props) => {
          if (props && props.map) {
            // 启用滚轮放大缩小，默认禁用
            props.map.enableScrollWheelZoom();
          }
        }}
        widget={[
          'GeolocationControl',
          {
            name: 'OverviewMapControl',
            options: {
              isOpen: true,
            }
          },
          {
            name: 'CopyrightControl',
            control: (BMap, map) => {
              // 设置版权控件位置
              const cr = new BMap.CopyrightControl({ anchor: BMAP_ANCHOR_TOP_RIGHT });
              // 返回地图可视区域
              const bs = map.getBounds();
              cr.removeCopyright(1);
              cr.addCopyright({
                id: 1,
                content: "<a href='#' style='font-size:20px;background:yellow'>我是自定义版权控件呀</a>",
                // bounds: bs,
              });
              return cr;
            },
          },
          {
            name: 'NavigationControl',
            options: (BMap) => {
              return {
                offset: new BMap.Size(150, 5),
                showZoomInfo: false,
                enableGeolocation: true,
              }
            }
          }
        ]}
      />
    </APILoader>
  </div>
);
ReactDOM.render(<Demo />, _mount_);

可控属性

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

const Demo = () => {
  const [center, setCenter] = useState('北京');
  const [enableScrollWheelZoom, setEnableScrollWheelZoom] = useState(true);
  return (
    <div style={{ width: '100%', height: '300px' }}>
      <button onClick={() => setCenter('北京')}>北京</button>
      <button onClick={() => setCenter('上海')}>上海</button>
      <button onClick={() => setEnableScrollWheelZoom(!enableScrollWheelZoom)}>{enableScrollWheelZoom ? '禁用': '启用'}滚轮放大缩小</button>
      <APILoader akay="GTrnXa5hwXGwgQnTBG28SHBubErMKm3f">
        <Map enableScrollWheelZoom={enableScrollWheelZoom} zoom={10}  center={center}/>
      </APILoader>
    </div>
  );
}
ReactDOM.render(<Demo />, _mount_);

使用 hooks

map, setMap, container, setContainer, zoom, setZoom, setCenter, autoLocalCity, setAutoLocalCity,

import ReactDOM from 'react-dom';
import { useRef, useEffect, useState } from 'react';
import { Map, APILoader, useMap } from '@uiw/react-baidu-map';

const Example = () => {
  const divElm = useRef();
  const [zoom, setZoom] = useState(15)
  const { setContainer, map, center, setCenter, setAutoLocalCity } = useMap({
    enableScrollWheelZoom: true, // 启用滚轮放大缩小，默认禁用
    center: '北京',
    widget: ['GeolocationControl', 'NavigationControl']
  });
  useEffect(() => {
    if (divElm.current && !map) {
      setContainer(divElm.current);
    }
  });

  useEffect(() => {
    if (map) {
      // 启用滚轮放大缩小，默认禁用
      map.setZoom(zoom);
    }
  }, [zoom, map]);
  
  return (
    <>
      <button onClick={() => setZoom(zoom-1)}>-</button>
      <span>{zoom || 15}</span>
      <button onClick={() => setZoom(zoom+1)}>+</button>
      <button onClick={() => setCenter('北京')}>北京</button>
      <button onClick={() => setCenter('上海')}>上海</button>
      <button onClick={() => setAutoLocalCity(true)}>IP定位</button>
      <div ref={divElm} style={{ height: 350 }} />
    </>
  )
}

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

Props

参数 说明 类型 默认值
widget 百度地图上负责与地图交互的UI元素称为控件，实例参考。百度控件文档 string[]/object[] []
center 定位, 可使用如 上海市青浦区 的地区字符串，也可以使用对象如 {lng: 121.424333, lat: 31.228604} 表示经纬度。百度拾取坐标系统 Point,String 上海市
autoLocalCity 设为 true, IP定位获取当前城市，进行自动定位 boolean -
zoom 缩放等级，如果 center 类型为 Point 时，zoom必须赋值，范围 3-19 级， 若调用高清底图（针对移动端开发）时，zoom 可赋值范围为 3-18 级。 如果center类型为字符串时，比如“北京”，zoom可以忽略，地图将自动根据 center 适配最佳 zoom 级别 number -
minZoom 地图允许展示的最小级别 number -
maxZoom 地图允许展示的最大级别 number -
mapType 地图类型 MapType BMAP_NORMAL_MAP
mapStyle 设置地图样式 MapStyle -
defaultCursor 设置地图默认的鼠标指针样式。参数 cursor 应符合 CSS 的 cursor 属性规范 string -
draggingCursor 设置拖拽地图时的鼠标指针样式。参数 cursor 应符合 CSS 的 cursor 属性规范 string -
panorama 将全景实例与Map类进行绑定 Panorama -
currentCity 设置地图城市，注意当地图初始化时的类型设置为 BMAP_NORMAL_MAP 时，需要在调用 centerAndZoom 之前调用此方法设置地图所在城市。例如： var map = new BMap.Map(“container”, {mapType: BMAP_NORMAL_MAP}); map.setCurrentCity(“北京市”); map.centerAndZoom(new BMap.Point(116.404, 39.915), 18); 注意：初始化的坐标应与您设置的城市对应，否则地图将无法正常显示。 string -
viewport 根据提供的地理区域或坐标设置地图视野，调整后的视野会保证包含提供的地理区域或坐标 (view: Array<Point> \| Viewport, viewportOptions: ViewportOptions) -
mapStyleV2 设置地图样式的个性化地图服务V2，使用对象字面量形式表示，样式Json，通过编辑器生成。(支持Canvas) { styleJson: MapStyleItem[] } / {styleId: string} -
enableHighResolution 是否启用使用高分辨率地图。在iPhone4及其后续设备上，可以通过开启此选项获取更高分辨率的底图，v1.2,v1.3版本默认不开启，v1.4 默认为开启状态 boolean -
enableAutoResize 是否启用自动适应容器尺寸变化，默认启用 boolean true
enableMapClick 是否开启底图可点功能 boolean true
enableDragging 启用地图拖拽，默认启用 boolean -
enableScrollWheelZoom 启用滚轮放大缩小，默认禁用 boolean -
enableDoubleClickZoom 启用双击放大，默认启用 boolean true
enableInertialDragging 启用地图惯性拖拽，默认禁用 boolean -
enableContinuousZoom 启用连续缩放效果，默认禁用 boolean -
enablePinchToZoom 启用双指操作缩放，默认启用 boolean true
enableKeyboard 启用键盘操作，默认禁用。键盘的上、下、左、右键可连续移动地图。同时按下其中两个键可使地图进行对角移动。PgUp、PgDn、Home和End键会使地图平移其1/2的大小。+、-键会使地图放大或缩小一级 boolean -

事件

参数 说明 类型
onClick 左键单击地图时触发此事件。 当双击时，产生的事件序列为： click click dblclick (event: {type: string, target: any, point: Point, pixel: Pixel, overlay: Overlay }): void;
onDblClick 鼠标双击地图时会触发此事件 (event: {type: string, target: any, pixel: Pixel, point: Point }): void;
onRightClick 右键单击地图时触发此事件。 当双击时，产生的事件序列为： rightclick rightclick rightdblclick (event: {type: string, target: any, point: Point, pixel: Pixel, overlay: Overlay }): void;
onRightdblClick 右键双击地图时触发此事件 (event: {type: string, target: any, point: Point, pixel: Pixel, overlay: Overlay }): void;
onMapTypeChange 地图类型发生变化时触发此事件 (event: {type: string, target: any }): void;
onMouseMove 鼠标在地图区域移动过程中触发此事件 (event: {type: string, target: any, point: Point, pixel: Pixel, overlay: Overlay }): void;
onMouseOver 鼠标移入地图区域时触发此事件 (event: {type: string, target: any }): void;
onMouseOut 鼠标移出地图区域时触发此事件 (event: {type: string, target: any }): void;
onMoveStart 地图移动开始时触发此事件 (event: {type: string, target: any }): void;
onMoving 地图移动过程中触发此事件 (event: {type: string, target: any }): void;
onMoveEnd 地图移动结束时触发此事件 (event: {type: string, target: any }): void;
onZoomStart 地图更改缩放级别开始时触发触发此事件 (event: {type: string, target: any }): void;
onZoomEnd 地图更改缩放级别结束时触发触发此事件 (event: {type: string, target: any }): void;
onAddOverlay 当使用 Map.addOverlay() 方法向地图中添加单个覆盖物时会触发此事件 (event: {type: string, target: any }): void;
onAddControl 当使用 Map.addControl() 方法向地图中添加单个控件时会触发此事件 (event: {type: string, target: any }): void;
onRemoveControl 当使用 Map.removeControl() 方法移除单个控件时会触发此事件 (event: {type: string, target: any }): void;
onRemoveOverlay 当使用 Map.removeOverlay() 方法移除单个覆盖物时会触发此事件 (event: {type: string, target: any }): void;
onClearOverlays 当使用 Map.clearOverlays() 方法一次性移除全部覆盖物时会触发此事件 (event: {type: string, target: any }): void;
onDragStart 开始拖拽地图时触发 (event: {type: string, target: any, pixel: Pixel, point: Point }): void;
onDragging 拖拽地图过程中触发 (event: {type: string, target: any, pixel: Pixel, point: Point }): void;
onDragEnd 停止拖拽地图时触发 (event: {type: string, target: any, pixel: Pixel, point: Point }): void;
onAddTileLayer 添加一个自定义地图图层时触发此事件 (event: {type: string, target: any }): void;
onRemoveTileLayer 移除一个自定义地图图层时触发此事件 (event: {type: string, target: any }): void;
onLoad 调用Map.centerAndZoom()方法时会触发此事件。这表示位置、缩放层级已经确定，但可能还在载入地图图块 (event: {type: string, target: any, pixel: Pixel, point: Point, zoom: number }): void;
onReSize 地图可视区域大小发生变化时会触发此事件 (event: {type: string, target: any, size: Size }): void;
onHotspotClick 点击热区时触发此事件 (event: {type: string, target: any, spots: HotspotOptions }): void;
onHotspotOver 鼠标移至热区时触发此事件 (event: {type: string, target: any, spots: HotspotOptions }): void;
onHotspotOut 鼠标移出热区时触发此事件 (event: {type: string, target: any, spots: HotspotOptions }): void;
onTilesLoaded 当地图所有图块完成加载时触发此事件 (event: {type: string, target: any }): void;
onTouchStart 触摸开始时触发此事件，仅适用移动设备 (event: {type: string, target: any, point: Point, pixel}): void;
onTouchMove 触摸移动时触发此事件，仅适用移动设备 (event: {type: string, target: any, point: Point, pixel}): void;
onTouchEnd 触摸结束时触发此事件，仅适用移动设备 (event: {type: string, target: any, point: Point, pixel}): void;
onLongPress 长按事件，仅适用移动设备 (event: {type: string, target: any, point: Point, pixel}): void;