Reactjs 如何使用地图作为react中的位置输入？

我正在尝试制作一个表单，用户可以搜索他们的位置或锁定他的位置。我正在使用

react传单

加载地图，并使用

react传单搜索

添加搜索功能。 搜索功能运行良好。下面您可以看到代码

<Map center={position} zoom={zoom}  onDragEnd = {function(e){ console.log(e);}} >
  <TileLayer
    attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    url='https://{s}.tile.osm.org/{z}/{x}/{y}.png'/>
  <Search 
    position="topright" 
    showPopup={false} 
    provider="OpenStreetMap" 
    showMarker={true} 
    openSearchOnLoad={true} 
    closeResultsOnClick={true} 
    providerOptions={{ region: "np" }}/>
</Map>

我想做的是访问用户输入的位置或在用户选择位置后显示的标记的经纬度。我试图搜索事件侦听器，但找不到任何侦听器。目前我正在尝试使用

onDragEnd

事件，但尚未成功。有人能告诉我如何实现我的目标吗？

不幸的是，我没有一个正确的方法来检索搜索结果。有一个

mapStateModifier

回调，我们可以使用它来获取搜索结果坐标

LatLng

对象，但我们还必须设置map

flyTo

调用：

render（）{
常数位置=[51.505，-0.09]；
常数zoom=13；
返回(
this.mapRef=ref}
中心={position}
缩放={zoom}
>
this.mapSearchRef=ref}
mapStateModifier={（latLng）=>{
//使用结果纬度、经度进行工作
console.log（'搜索纬度：'，latLng.lat）；
log（'搜索经度：'，latLng.lng）；
if（this.mapRef）{
//因为我们有一个自定义的mapStateModifier回调，
//搜索组件不会飞到坐标
//所以我们需要使用我们的参考文献
this.mapRef.contextValue.map.flyTo(
拉丁，
this.mapSearchRef.props.zoom，
this.mapSearchRef.props.ZoomPanopions
);
}
}}
position=“topright”
showPopup={false}
provider=“OpenStreetMap”
showMarker={true}
openSearchOnLoad={true}
closeResultsOnClick={true}
providerOptions={{region:“np”}
/>
);
}

---

您可以查看此示例，看看它是否有效。

谢谢您的回答。我绕了一圈来解决这个问题。但是我会检查这是否是一个正确的方法。嗨，我正在尝试理解解决方案并应用它。你能再解释一下吗？还有，你知道如何让搜索标记可以拖动吗？为什么你不能应用它？你打开Stackblitz的例子了吗？整个代码都在运行。是的，我可以应用它。但我想问的是，是否有办法使搜索后出现的标记可以拖动？您可以将拖动功能应用于

传单窗格传单标记窗格

，但这只会使标记移动，您将无法获得任何纬度和经度。这很难实现。你可以搜索这个，但我认为它没有实现。