Question

我有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地图中执行此操作吗？

谢谢！

Answer 1

在点击事件中，您可以收到已点击的坐标的LatLng。但是，由于这可能不是创建折线的确切点，因此您需要找到最近的点。你可以在谷歌地图库中使用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);

 });

Answer 2

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

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

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

或者，如果要访问相关对象，请通过在polyLine上创建变量来设置它：

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

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

alert(this.car.color);

Answer 3

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

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

Google地图折线：点击折线部分并返回ID？

3 个答案: