@uiw/react-baidu-map-with-map

withMap

一个高阶组件，用于将当前上下文的 BMap.Map 实例注入到目标组件中，主要用于实现对地图组件的自定义控制。

import { withMap, APILoader } from '@uiw/react-baidu-map';
// 或者单独安装使用
import withMap from '@uiw/react-baidu-map-with-map';

基本用法

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

class ExampleMap extends React.Component {
  componentDidMount() {
    const { BMap, map, container } = this.props;
    // 启用滚轮放大缩小，默认禁用
    // map.enableScrollWheelZoom();
    // 添加地图类型控件
    map.addControl(new BMap.MapTypeControl({
      mapTypes:[
        BMAP_NORMAL_MAP,
        BMAP_HYBRID_MAP
      ]
    }));
    const point = new BMap.Point(121.458965, 31.238775);
    const marker = new BMap.Marker(point);      // 创建标注
    map.addOverlay(marker);                     // 将标注添加到地图中
    marker.setAnimation(BMAP_ANIMATION_BOUNCE); // 跳动的动画

    // 添加自定义菜单
    const menu = new BMap.ContextMenu()
    const menuItem = [
      { text: '放大', callback: () => map.zoomIn() },
      { text: '缩小', callback: () => map.zoomOut() },
    ]
    for (let i = 0; i < menuItem.length; i++) {
      menu.addItem(new BMap.MenuItem(menuItem[i].text, menuItem[i].callback, 100));
    }
    map.addContextMenu(menu);
  }
  render() {
    return null;
  }
}

const CustomWithMap = withMap(ExampleMap);

const Demo = () => {
  return (
    <div style={{ width: '100%', height: '300px' }}>
      <APILoader akay="eYpCTECSntZmw0WyoQ7zFpCRR9cpgHFG">
        <CustomWithMap
          enableScrollWheelZoom
          zoom={8}
          ref={(instance) => {
            console.log('instance>', instance);
          }}
        />
      </APILoader>
    </div>
  )
};

export default Demo;

高阶组件 withMap 可以作为 Map 组件来使用，继承 Map 可以默认传递 Map 的属性，相关属性参考 <Map>。