Как получить onclick событие маркера, созданного getroute

Question

В этом jsfiddle - упрощенная версия моего js: http://jsfiddle.net/Drecker/2m4kvxb8/4/ Обратите внимание, что интересной частью jsfiddle является только метод showRoute. И метод showMarker показывает только желаемое поведение на нормальный маркер.

В основном я генерирую маршрут через gmap3getroute с некоторыми путевыми точками. После того, как вы нажмете на путевую точку, мне нужно открыть небольшую инфобокса с более настраиваемой информацией из этой точки - так что в любом случае вы получите событие onclick такой путевой точки (с некоторой идентификацией этой путевой точки, чтобы я мог получить правильную информацию). Я могу добиться желаемого поведения на отдельном маркере (как вы можете видеть в jsfiddle - это полностью функциональный отдельный маркер в верхнем левом углу), но не на маркерах, сгенерированных directionrenderer.

Кроме того, обратите внимание, что мои путевые точки имеют stopover: false, и такие маркеры почему-то игнорируют (некоторые) параметры, такие как title, как вы можете видеть в jsfiddle.

Любая помощь очень ценится - я пробовал несколько вещей, ни одна из них не работает.

Answer 1

Существует нет такой опции, в соответствии с документацией и множеством подобных вопросов здесь, в stackoverflow, вы не можете привязать действие click к путевым точкам.

У меня есть обходное решение для этой проблемы. Основная идея заключается в добавлении маркеров вместо путевых точек и изменении их значка. Маркер имеет гораздо больше опций, чем путевая точка. Поэтому я удалил путевые точки и добавил маркеры. Обратите внимание, что вы должны быть гораздо более точными при добавлении местоположения маркеров в

варианты без путевых точек:

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

Answer 2

Надеется, что вы используете библиотеку 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)); 

где

маркер является varible, который будет что-то вроде этого,

//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 
       }); 

Надежда сверху вы получили некоторое представление о том, может быть полезным для вас с вашей проблемой