在 Google Maps v3 中检测航点点击 DirectionsRenderer 标记答案

【问题标题】：Detect waypoint click on DirectionsRenderer marker in Google Maps v3在 Google Maps v3 中检测航点点击 DirectionsRenderer 标记
【发布时间】：2011-10-01 14:25:47
【问题描述】：

在 Google Maps API v3 中，我如何从 DirectionsRenderer 获取航点标记，以便向它们添加点击事件（例如删除菜单）。

【问题讨论】：

我现在遇到了同样的问题。你找到解决办法了吗？
我认为 Google Maps API 的当前状态没有解决方案。有人应该提交功能请求。我已经考虑过一种潜在的解决方法，但还没有时间去追求它。
@lashleigh：此增强功能将允许轻松编写代码来解决问题。如果您愿意，请继续为它加注星标：code.google.com/p/gmaps-api-issues/issues/detail?id=2141
谢谢，我会把我的名字添加到列表中。

标签： javascript google-maps-api-3

【解决方案1】：

在找到更好的解决方案之前，这是我所采用的解决方法。基本思想是将您自己的标记放在航点之上，并将点击事件侦听器绑定到您的标记。我做了一个jsfiddle 来展示这个想法。

这绝对不是完美的，但是使用自定义图标而不是默认标记，它看起来会很自然。

【讨论】：

【解决方案2】：

另一种不涉及在地图上放置新标记的方法是检测地图小部件上的 DOM 点击事件。这个想法很简单。当检测到点击时：

使用MapCanvasProjection将所有航路点的LatLng坐标转换为屏幕上的坐标（或者，实际上是地图小部件上的坐标）
计算航点与点击点之间的距离。如果用户点击了足够接近任何航点（距离小于航点图标的半径） - 显示该点的菜单

我编码了complete solution in java for gwt。把它翻译成javascript应该很简单。

【讨论】：

【解决方案3】：

您可以在标记上创建它，并为其分配高 z-index 以便它覆盖路点，而不是在航点上创建点击事件。

创建单个标记并分配高 z-index

    marker = new google.maps.Marker({
      map:map,
      position: new google.maps.LatLng(1.99, 2.99),
    });
    marker.setZIndex(999);

为标记添加监听器

google.maps.event.addListener(marker, 'click', function(event){
      alert(marker.title);
    });

现在创建航路点。

【讨论】：