如何获取getroute生成的marker的onclick事件

Question

在这个 jsfiddle 中是我的 js 的简化版本：http://jsfiddle.net/Drecker/2m4kvxb8/4/ 请注意，jsfiddle 有趣的部分只是 showRoute 方法。并且方法 showMarker 仅在 normal 标记上显示所需的行为。

基本上我通过gmap3 getroute 生成一条带有一些航点的路线。单击一个航点后，我需要打开一个包含该点更多自定义信息的小信息框 - 所以基本上以某种方式获取此类航点的 onclick 事件（通过该航点的一些标识，以便我能够获得正确的信息）。我能够在单独的标记上实现所需的行为（正如您在 jsfiddle 中看到的那样 - 这是左上角功能齐全的单独标记），但不能在 directionrenderer 生成的标记上实现。

此外，请注意，我的航路点有 stopover: false，并且出于某种原因，此类标记会忽略（某些）选项，例如 title，正如您在 jsfiddle 中看到的那样。

非常感谢任何帮助 - 我已经尝试了几种方法，但它们都不起作用。

Answer 1

希望您使用的是谷歌 API 库的某个版本，以防出现类似情况

  <script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=places,geometry" type="text/javascript"></script>

你有一个 div 空间来显示地图，比如说

<div id="map" style="width: 700px; height: 600px;"></div>

所以你可以使用它在标记上添加监听器

//location is an array variable where you store your co ordinates
//code to show map
var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 10,
                center: new google.maps.LatLng(locations[0].latitude, locations[0].longitude),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });
//adding listener
var marker,i;
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', (function (marker, i) {
                    return function () {
                        infowindow.setContent(locations[i].city);
                        infowindow.open(map, marker);
                    }
                })(marker, i));

在哪里

标记 是这样的变量，

 //adding marker
 for (i = 0; i < locations.length; i++) {
                marker = new google.maps.Marker({
                    position: new google.maps.LatLng(locations[i].latitude, locations[i].longitude),
                    map: map
                });

希望上面你有一些想法，可能对你的问题有所帮助

Answer 2

没有这样的选项，根据stackoverflow上的文档和很多类似的问题，你不能将点击动作绑定到航点。

我有解决这个问题的方法。主要思想是添加标记而不是航点并更改其图标。标记比航路点有更多的选择。所以我删除了航点并添加了标记。请注意，添加标记位置时必须更加精确

没有航点的选项：

options: {origin: {lat:49.9, lng: 14.9},
          destination: {lat: 50.1, lng: 15.1},
          travelMode: google.maps.DirectionsTravelMode.DRIVING
         },

添加了带有新图标和点击事件的标记：

marker:{
    values:[
      {latLng:[49.96485, 14.88392], data:"Waypoint1", options:{icon: "http://mt.google.com/vt/icon/name=icons/spotlight/directions_transfer_icon_10px.png&scale=1"}},
      {latLng:[49.97730, 14.88185], data:"Waypoint2", options:{icon: "http://mt.google.com/vt/icon/name=icons/spotlight/directions_transfer_icon_10px.png&scale=1"}}
    ],
    options:{
      draggable: false
    },
    events:{
      click: function(marker, event, context){
        var map = $(this).gmap3("get"),
          infowindow = $(this).gmap3({get:{name:"infowindow"}});
        if (infowindow){
          infowindow.open(map, marker);
          infowindow.setContent(context.data);
        } else {
          $(this).gmap3({
            infowindow:{
              anchor:marker, 
              options:{content: context.data}
            }
          });
        }
      }
    }
  }

这是我解决该问题的方法：DEMO