谷歌地图折线：点击折线部分并返回ID？答案

【问题标题】：Google Maps polyline: Click on section of polyline and return ID?谷歌地图折线：点击折线部分并返回ID？
【发布时间】：2011-09-04 10:31:45
【问题描述】：

我有一条 Google Maps V3 折线。我可以检测整个多段线上的点击事件，但我可以对点击事件做更高级的事情吗？

我想做的是检测折线的哪一部分被点击，并在警报中显示。

 routePath = new google.maps.Polyline({
     path: routeCoordinates,
     strokeColor: "#CC33FF",
     strokeWeight: 3
 });     
 routePath.setMap(map);
 google.maps.event.addListener(routePath, 'click', function() {
     alert(routePath);
     // TODO: display which section of the polyline has been clicked?
 });

有人知道如何在 Google 地图中执行此操作吗？

谢谢！

【问题讨论】：

我can't even get the click event to fire，我正在尝试像你一样添加元素以及直接在折线上，我做错了什么？

标签： google-maps google-maps-api-3 polyline

【解决方案1】：

在点击事件中，您可以收到被点击坐标的 LatLng。但是，由于这可能不是创建折线的确切点，因此您需要找到最近的点。您可以使用 Google 地图库中的 computeDistanceBetween，也可以使用毕达哥拉斯定理，因为在这种情况下它应该可以为您提供足够好的准确度。

您可以在此处找到有关 computeDistanceBetween 的更多信息： https://developers.google.com/maps/documentation/javascript/reference#spherical

这是一个代码示例，您可以如何使用 computeDistanceBetween 来实现。

google.maps.event.addListener(routePath, 'click', function(h) {
     var latlng=h.latLng;
     alert(routePath);
     var needle = {
         minDistance: 9999999999, //silly high
         index: -1,
         latlng: null
     };
     routePath.getPath().forEach(function(routePoint, index){
         var dist = google.maps.geometry.spherical.computeDistanceBetween(latlng, routePoint);
         if (dist < needle.minDistance){
            needle.minDistance = dist;
            needle.index = index;
            needle.latlng = routePoint;
         }
     });
     // The closest point in the polyline
     alert("Closest index: " + needle.index);

     // The clicked point on the polyline
     alert(latlng);

 });

【讨论】：

【解决方案2】：

我遇到了同样的问题，问题是我如何处理它：设置处理程序时：

google.maps.event.addListener(routePath, 'click', function(e) {
    handlePolyClick(e, this)
});

var handlePolyClick(eventArgs, polyLine) {
    // now you can access the polyLine
    alert(polyLine.strokeColor);
});

或者如果你想访问一个相关的对象，通过在折线上创建一个变量来设置它：

routePath.car = $.extend({}, cars[1]); // shallow copy of cars[1]

然后您可以从活动中访问您的汽车：

alert(this.car.color);

【讨论】：

这不会告诉你点击了折线的哪个部分...是吗？
当您想要扩展折线属性时，这非常有效。我不知道 $.extend 的使用很整洁！。

【解决方案3】：

在很多情况下，当路径越过或靠近自身时，通过距离分析找到最近点会失败。

您可以使用它来识别候选者，但如果您使用点击点分割 2 个连续的折线点，您应该通过比较创建的 2 条线的 cross product 和/或 dot product 来确认它们

【讨论】：