@uiw/react-amap-context-menu v6.0.3

ContextMenu 右键菜单

地图图面一种特殊的信息窗体，即右键菜单。AMap.ContextMenu 类提供图面添加右键菜单的方式。具体使用方式如下

import { ContextMenu } from '@uiw/react-amap';
// 或者单独安装使用
import { ContextMenu } from '@uiw/react-amap-context-menu';

基本用法

地图上右击鼠标，弹出自定义样式的右键菜单

import ReactDOM from 'react-dom';
import React, { useState, useRef } from 'react';
import { Map, APILoader, ContextMenu } from '@uiw/react-amap';

const Example = () => {
  const [show, setShow] = useState(true);
  const mapRef = useRef();
  let lnglat = null;

  function handleMenu(type) {
    if (mapRef && mapRef.current && mapRef.current.map) {
      switch(type) {
        case 'zoomIn': mapRef.current.map.zoomIn(); break;
        case 'zoomOut': mapRef.current.map.zoomOut(); break;
        case 'center': mapRef.current.map.setZoomAndCenter(4, [108.946609, 34.262324]); break;
      }
      if (type === 'marker' && lnglat) {
        new AMap.Marker({
            map: mapRef.current.map,
            position: lnglat //基点位置
        });
      }
    }
  }
  return (
    <div style={{ width: '100%', height: '500px' }}>
      <Map
        ref={mapRef}
        zoom={14}
        center={[116.397637, 39.900001]}
        scrollWheel={false}
        onRightClick={(e) => {
          lnglat = e.lnglat;
        }}
      >
        <ContextMenu>
          <ContextMenu.Item text="放大一级" onClick={(e) => handleMenu('zoomIn')} />
          <ContextMenu.Item text="缩小一级" onClick={(e) => handleMenu('zoomOut')} />
          <ContextMenu.Item text="缩放至全国范围" onClick={(e) => handleMenu('center')} />
          <ContextMenu.Item text="添加标记" onClick={(e) => handleMenu('marker')} />
        </ContextMenu>
      </Map>
    </div>
  );
}

const Mount = () => (
  <APILoader akey="a7a90e05a37d3f6bf76d4a9032fc9129">
    <Example />
  </APILoader>
);

export default Mount;

Props

事件