Question

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

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

此外请注意我的航点有stopover: false，并且由于某种原因，这些标记忽略了title之类的一些选项，正如您在jsfiddle中看到的那样。

非常感谢任何帮助 - 我尝试了几件事，但都没有。

Answer 1

希望您使用google 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上的很多类似问题，你不能将点击动作绑定到航点。

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

没有航路点的选项：

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

如何获得由getroute生成的标记的onclick事件

2 个答案: