@uiw/react-baidu-map-map v2.7.1

Map 组件

Map 组件是其他组件的基础，Map 组件会给所有的子组件注入两个属性 map，container 和 BMap，在 v2.3.0+ 版本支持使用 useMapContext 获取它们。

🚧 注意

1. 组件 <Map> 必须包裹在 <APILoader> 组件内，该组件作用是加载百度地图 SDK。
2. 其他地图组件必须作为 <Map> 的子组件使用；

import { Map, useMap, APILoader, Provider, useMapContext } from '@uiw/react-baidu-map';
// 或者单独安装使用
import Map, { useMap, APILoader, Provider, useMapContext } from '@uiw/react-baidu-map-map';

🚧 注意：需要使用到 <Provider>，新的封装 Marker 组建使用了 Context 来避免 map 对象传来传去。

基本用法

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

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

const Demo = () => (
  <div style={{ width: '100%', height: '300px' }}>
    <APILoader akay="eYpCTECSntZmw0WyoQ7zFpCRR9cpgHFG">
      <Map />
    </APILoader>
  </div>
);
export default Demo;

小工具

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

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

const Demo = () => (
  <div style={{ width: '100%', height: '300px' }}>
    <APILoader akay="eYpCTECSntZmw0WyoQ7zFpCRR9cpgHFG">
      <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>
);
export default Demo;

useMapContext & Provider

通过 React 的 Context 提供了一个无需为每层组件手动注入 map，container 和 BMap 三个属性 props，就能在组件树间进行传递。

🚧 在 v2.3.0+ 版本支持

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

const Marker = () => {
  const { map } = useMapContext();
  const container = useRef(null);
  const { setContainer } = useMap({
    zoom: 3,
    widget: ['GeolocationControl', 'NavigationControl']
  });

  useEffect(() => {
    if (container.current) {
      setContainer(container.current);
    }
  }, [container.current]);

  useEffect(() => {
    if (map) {
      // 创建点标记
      const marker1 = new BMap.Marker(new BMap.Point(116.404, 39.925));
      const marker2 = new BMap.Marker(new BMap.Point(116.404, 39.915));
      const marker3 = new BMap.Marker(new BMap.Point(116.395, 39.935));
      const marker4 = new BMap.Marker(new BMap.Point(116.415, 39.931));
      // 在地图上添加点标记
      map.addOverlay(marker1);
      map.addOverlay(marker2);
      map.addOverlay(marker3);
      map.addOverlay(marker4);
    }
  }, [map]);
  return (
    <div ref={container} style={{ height: 300 }} />
  );
}

const Demo = () => {
  return (
    <div style={{ width: '100%', height: '300px', overflow: 'auto' }}>
      <APILoader akay="eYpCTECSntZmw0WyoQ7zFpCRR9cpgHFG">
        <Provider>
          <div>
            <Marker />
          </div>
        </Provider>
      </APILoader>
    </div>
  );
}
export default Demo;

import { useMapContext, Provider } from '@uiw/react-baidu-map';

const { BMap, map, container, state, dispatch } = useMapContext();
// => state.BMap
// => state.map
// => state.container

可控属性

import React from 'react';
import { useState } from 'react';
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="eYpCTECSntZmw0WyoQ7zFpCRR9cpgHFG">
        <Map enableScrollWheelZoom={enableScrollWheelZoom} zoom={10}  center={center}/>
      </APILoader>
    </div>
  );
}
export default Demo;

使用 hooks

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

import React from 'react';
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="eYpCTECSntZmw0WyoQ7zFpCRR9cpgHFG">
      <Example />
    </APILoader>
  </div>
);
export default Demo;

Props

事件