批量创建Marker 如何实现每个marker 都可以点击右键 进行拖拽

[ahua52]

Do you want to request a feature or report a bug?

What is the current behavior?

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run. Paste the link to your CodeSandbox (https://codesandbox.io/s/jnnxrwq5y3) example below:

What is the expected behavior?

[JserWang]

@ahua52 你可以尝试将这段代码完整粘贴到http://jser.wang/bmap/examples/menu/overlayMenu 替换代码部分点击运行即可看到效果

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {
  Map,
  Constants,
  Base,
  Marker,
} from 'rc-bmap';

const { Point } = Base;
const { CONTEXT_MENU_ICON } = Constants;
const { ContextMenu } = Marker;
const MenuItem = ContextMenu.Item;

class Example extends Component {

  state = {
    list: [
      { dragging: false, lng: 116.404, lat: 39.915 },
      { dragging: false, lng: 116.42, lat: 39.915 },
      { dragging: false, lng: 116.47, lat: 39.915 },
    ],
  }

  handleEnableDragging = (index) => {
    const list = this.state.list;
    list[index].dragging = true;
    this.setState({
        list,
    });
  }

  handleDisableDragging = (index) => {
    const list = this.state.list;
    list[index].dragging = false;
    this.setState({
        list,
    });
  }

  render() {
    const { list } = this.state;
    return (
      <div style={{ height: '100vh' }}>
        <Map
          ak="WAeVpuoSBH4NswS30GNbCRrlsmdGB5Gv"
          name="mapInstance"
          zoom={11}
          scrollWheelZoom // 设置滚轮缩放
        >
          <Point name="center" lng="116.404" lat="39.915" />
          {
            list.map((item, index) => <Marker dragging={item.dragging}>
            <Point lng={item.lng} lat={item.lat} />
            <ContextMenu>
              <MenuItem
                disabled={item.dragging}
                text="设置可拖拽"
                onClick={() => { this.handleEnableDragging(index); }}
              />
              <MenuItem
                disabled={!item.dragging}
                text="取消可拖拽"
                onClick={() => { this.handleDisableDragging(index); }}
              />
            </ContextMenu>
          </Marker>)
          }

        </Map>
      </div>
    );
  }
}

ReactDOM.render(
  <Example />,
  document.getElementById('root'),
);