【问题标题】:How can I find where a user has clicked on a Polyline?如何找到用户单击折线的位置?
【发布时间】:2020-07-20 04:17:58
【问题描述】:

如果我使用点击功能将折线添加到地图中:

    onPolylineClick = (props, polyline) => {
        console.log(props)
        console.log(polyline)
    }

    <Polyline
        onClick={this.onPolylineClick}
        path={gpsCoords}
    />

那么我如何确定它被点击的位置呢?我可以看到props.mapCenter,但这不会根据我点击的位置而改变,它只是地图的中心。

【问题讨论】:

标签: reactjs google-maps google-maps-react


【解决方案1】:

您还需要在 onPolylineClick 中传递第三个参数,因为您在折线中单击的点的 latLng 就在那里。您可以执行以下操作:

onPolylineClick = (props, polyline, e) => {
   console.log("Polyline Clicked on latlng: ")
   console.log(e.latLng.lat()+","+e.latLng.lng());
  };

您可以查看此sample code。确保在 GoogleApiWrapper 中添加您的 API 密钥,以使代码正常运行。

【讨论】:

  • 效果很好,但是如何处理包含多个段的折线?我可以知道用户点击了哪个片段吗?
  • 您可以使用 for 循环遍历每个段,并使用 Google Maps JavaScript 几何库的isLocationOnEdge() 来检查单击点更接近或位于哪个段。这是sample code。但是请注意,此功能具有公差,也可能导致显示另一个最近的段。如果这将是您的用例,我认为您需要为每个细分创建多个 以更准确。
猜你喜欢
  • 1970-01-01
  • 2016-09-30
  • 2019-07-22
  • 1970-01-01
  • 2023-03-31
  • 2013-12-19
  • 1970-01-01
  • 1970-01-01
  • 2021-05-24
相关资源
最近更新 更多