Control 自定义控件

您可以通过此组件来实现自定义控件。同时你可以使用 Map 组件 widget 属性来更方便，设置自带默认控件。

import { Control, useControl } from '@uiw/react-baidu-map';
// 或者单独安装使用
import Control, { useControl } from '@uiw/react-baidu-map-control';

基本用法

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

const Example = () => {
  const [count, setCount] = useState(0);
  const map = useRef(null);
  return (
    <Map zoom={13} ref={map} widget={['NavigationControl']} style={{ height: 350 }}>
      <Control
        ref={(instance) => {
          if (instance && instance.control) {
            instance.control.setAnchor(BMAP_ANCHOR_BOTTOM_RIGHT);
          }
        }}
      >
        <div
          style={{ background: 'gray', padding: '10px', fontSize: 12 }}
          onClick={() => setCount(count + 1)}
        >
          Current Count: {count}
        </div>
      </Control>
      <Control anchor={BMAP_ANCHOR_TOP_RIGHT}>
        <div
          style={{ background: 'gray', padding: '10px', fontSize: 12, display: 'inline-block' }}
          onClick={() => {
            const instanceMap = map.current.map
            if (instanceMap) {
              instanceMap.setZoom(instanceMap.getZoom() + 2);
            }
          }}
        >
          放大2级
        </div>
        <div
          style={{ background: 'gray', padding: '10px', fontSize: 12, display: 'inline-block', color: '#fff' }}
          onClick={() => {
            const instanceMap = map.current.map
            if (instanceMap) {
              instanceMap.setZoom(instanceMap.getZoom() - 2);
            }
          }}
        >
          缩小2级
        </div>
      </Control>
    </Map>
  );
}

const Demo = () => (
  <div style={{ width: '100%' }}>
    <APILoader akay="eYpCTECSntZmw0WyoQ7zFpCRR9cpgHFG">
      <Example />
    </APILoader>
  </div>
);

export default Demo;

使用 hooks

control, setControl

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

const Example = () => {
  const divElm = useRef(null);
  const [count, setCount] = useState(4);
  const { map } = useMapContext();
  const { ControlPortal } = useControl({ anchor: BMAP_ANCHOR_TOP_RIGHT });
  const { ControlPortal: ControlPortal2 } = useControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT });
  return (
    <>
      <ControlPortal>
        <div style={{ background: 'gray', padding: '10px' }}>
          <button
            onClick={() => {
              setCount(count + 1);
              map.setZoom(map.getZoom() + 1);
            }}
          >
            放大1级 {count}
          </button>
          <button
            onClick={() => {
              setCount(count - 1);
              map.setZoom(map.getZoom() - 2);
            }}
          >
            缩小1级 {count}
          </button>
        </div>
      </ControlPortal>
      <ControlPortal2>
        <div
          style={{ background: 'gray', padding: '10px', fontSize: 12 }}
          onClick={() => setCount(count + 1)}
        >
          Current Count: {count}
        </div>
      </ControlPortal2>
    </>
  )
}

const Demo = () => (
  <div style={{ width: '100%' }}>
    <APILoader akay="eYpCTECSntZmw0WyoQ7zFpCRR9cpgHFG">
      <Provider>
        <Map zoom={13} widget={['NavigationControl']} style={{ height: 350 }}>
          <Example />
        </Map>
      </Provider>
    </APILoader>
  </div>
);

export default Demo;

Props

| 参数 | 说明 | 类型 | 默认值 | | ----- | ----- | ----- | ----- | | visiable | 覆盖物是否可见。 | boolean | - | | anchor | 控件的停靠位置。| ControlAnchor | BMAP_ANCHOR_TOP_LEFT | | offset | 控件的位置偏移值。 | BMap.Size | new BMap.Size(10, 10) | | children | 展示控件内容。 | JSX.Element | - |

ControlAnchor

此常量表示控件的定位。

| 常量 | 值 | 描述 | | ----- | ----- | ----- | | BMAP_ANCHOR_TOP_LEFT | 0 | ↖ 控件将定位到地图的左上角 | | BMAP_ANCHOR_TOP_RIGHT | 1 | ↗ 控件将定位到地图的右上角 | | BMAP_ANCHOR_BOTTOM_LEFT | 2 | ↙ 控件将定位到地图的左下角 | | BMAP_ANCHOR_BOTTOM_RIGHT | 3 | ↘ 控件将定位到地图的右下角 |