如何使 reat-mapbox-gl 标记组件可拖动？

Question

我正在使用 https://github.com/alex3165/react-mapbox-gl

我的问题是如何使标记组件可拖动？

 <Map
    id='map'
    style="mapbox://styles/mapbox/streets-v11"
    center={[locationInputs.lon, locationInputs.lat]}
    containerStyle={{ height: '500px', width: '100%' }}>
       <Marker
          coordinates={[locationInputs.lon, locationInputs.lat ]}
          anchor="center">
          <div class="marker"></div>
       </Marker>
 </Map>

我错过了什么吗？谢谢

Answer 1

React Map GL 在他们的文档中有一个类似的例子：

https://visgl.github.io/react-map-gl/examples/draggable-markers

在该页面上，您会找到 link 以“查看代码”，在 App.js 中，您会看到逻辑。

React-Mapbox-GL 以类似的方式工作，并且具有相同的属性，您可以将函数传递给：onDragStart、onDrag、onDragEnd.

您需要以与他们类似的方式设置您的标记：

  const onMarkerDragStart = useCallback(event => {
    logEvents(_events => ({..._events, onDragStart: event.lngLat}));
  }, []);

  const onMarkerDrag = useCallback(event => {
    logEvents(_events => ({..._events, onDrag: event.lngLat}));
  }, []);

  const onMarkerDragEnd = useCallback(event => {
    logEvents(_events => ({..._events, onDragEnd: event.lngLat}));
    setMarker({
      longitude: event.lngLat[0],
      latitude: event.lngLat[1]
    });
  }, []);

<Marker
  longitude={marker.longitude}
  latitude={marker.latitude}
  offsetTop={-20}
  offsetLeft={-10}
  draggable
  onDragStart={onMarkerDragStart}
  onDrag={onMarkerDrag}
  onDragEnd={onMarkerDragEnd}
>

如何使 reat-mapbox-gl 标记组件可拖动？

How to make a reat-mapbox-gl marker component draggable?

javascript

mapbox

reactjs

mapbox-gl-js

react-map-gl