时间戳

首页 > 解决方案 > 如何使 reat-mapbox-gl 标记组件可拖动？

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

问题描述

我正在使用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>

我错过了什么吗？谢谢

标签： javascriptreactjsmapboxmapbox-gl-jsreact-map-gl

解决方案

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

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

在该页面上，您会找到“查看代码”的链接，在 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}
>

推荐阅读