Как добавить слушателя на несколько маркеров, которые называют ту же функцию для отображения направления на клик в Google Maps API v3

Question

var x1 = 0; 
var startPoint = new google.maps.LatLng(0, 0); 
var endPoint = new google.maps.LatLng(0, 0); 
var marker; 
var latlngs = new Array(); 
var infowindow; 
var directionsService = new google.maps.DirectionsService(); 
var directionsDisplay = new google.maps.DirectionsRenderer(); 
var locations = [ 
    { 
     "name": "Frankie Johnnie & Luigo Too", 
     "address": "939 W El Camino Real, Mountain View, CA", 
     "lat": 37.386339, 
     "lng": -122.085823 
}, { 
     "name": "Amici's East Coast Pizzeria", 
     "address": "790 Castro St, Mountain View, CA", 
     "lat": 37.38714, 
     "lng": -122.083235 
}, { 
     "name": "Kapp's Pizza Bar & Grill", 
     "address": "191 Castro St, Mountain View, CA", 
     "lat": 37.393885, 
     "lng": -122.078916 
}, { 
     "name": "Round Table Pizza: Mountain View", 
     "address": "570 N Shoreline Blvd, Mountain View, CA", 
     "lat": 37.402653, 
     "lng": -122.079354 
}]; 

Edit: это глобальные переменные только для уточнения^

Я хочу, чтобы создать " нажмите на маркеры, чтобы получить направление ". До сих пор я создал список в формате JSON, который создает все маркеры от «лат» и «длинные» в списке без проблем:

for (var k in locations) { 
     latlngs[k] = new google.maps.LatLng(locations[k].lat, locations[k].lng); 
     marker = new google.maps.Marker({ 
      position: latlngs[k], 
      animation: google.maps.Animation.DROP, 
      title: locations[k].name, 
      map: map 
     }); 
    }; 

В списке JSON (местах [к]) составляет 132 мест в Всего. Я хочу, чтобы можно было щелкнуть маркер, сохранить его в качестве начальной точки для маршрутов, а затем ждать, когда будет щелкнуть маркер secnond, который будет сохранен как конечная точка. Щелчок второго маркера будет рассчитать и показать направления, как Iv'e пытались ниже:

google.maps.event.addListener(marker, 'click', function() { 
     if (x1 === 0) { 
      startPoint = this.marker.position; 
      var infowindow = new google.maps.InfoWindow({ 
       content: "Start", 
       position: startPoint 
      }); 
      infowindow.open(map, this.marker); 
      directionsDisplay.setMap(map); 
      directionsDisplay.setPanel(document.getElementById('panel')); 
      x1++; 
     } else { 
      endPoint = this.marker.position; 
      x1 = 0; 
      calculateDirections(startPoint, endPoint); 
     } 
    }); 

На данный момент не получает отображаться не InfoWindow и я получаю ошибку говоря «не может читать„позиции“неопределенный». Я могу получить указания, чтобы показать, когда я жестко задаю начальную и конечную точки.

Следующие темы затрагивают одну и ту же идею, но не отвечают на слушателя по всем проблемам с маркерами, что я считаю основной проблемой.

Google Maps API V3 - add event listener to all markers?

и

how do I add same event listener to many markers and then differentiate between the markers in the listeners in google maps api v3?

Answer 1

Если вы получаете LatLang по щелчку затем сохранить это обыкновение быть грандиозным. Я попытался добиться этого при щелчке и получить latlang. Я не уверен, насколько это решит вашу проблему, но определенно даст вам некоторую идею двигаться вперед.

Вот рабочий пример, и я надеюсь, что это поможет вам.

 var map; 
 
     var geocoder; 
 
     var mapOptions = { center: new google.maps.LatLng(37.09024, -95.712891), 
 
       zoom: 10, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP }; 
 

 
     function initialize() { 
 
var myOptions = { 
 
       center: new google.maps.LatLng(37.09024, -95.712891), 
 
       zoom: 10, 
 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
 
      }; 
 

 
      geocoder = new google.maps.Geocoder(); 
 
      var map = new google.maps.Map(document.getElementById("map_canvas"), 
 
      myOptions); 
 
      google.maps.event.addListener(map, 'click', function(event) { 
 
       placeMarker(event.latLng); 
 
      }); 
 

 
      var marker; 
 
      function placeMarker(location) { 
 
       if(marker){ //on vérifie si le marqueur existe 
 
        marker.setPosition(location); //on change sa position 
 
       }else{ 
 
        marker = new google.maps.Marker({ //on créé le marqueur 
 
         position: location, 
 
         map: map 
 
        }); 
 
       } 
 
       document.getElementById('lat').value=location.lat(); 
 
       document.getElementById('lng').value=location.lng(); 
 
       getAddress(location); 
 
      } 
 

 
     function getAddress(latLng) { 
 
     geocoder.geocode({'latLng': latLng}, 
 
      function(results, status) { 
 
      if(status == google.maps.GeocoderStatus.OK) { 
 
       if(results[0]) { 
 
       document.getElementById("address").value = results[0].formatted_address; 
 
       } 
 
       else { 
 
       document.getElementById("address").value = "No results"; 
 
       } 
 
      } 
 
      else { 
 
       document.getElementById("address").value = status; 
 
      } 
 
      }); 
 
     } 
 
     } 
 
     google.maps.event.addDomListener(window, 'load', initialize);

html, body, #map_canvas { margin: 0; padding: 0; height: 100% }

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script><input type="text" id="address" size="30"><br><input type="text" id="lat" size="10"><input type="text" id="lng" size="10"> 
 
    <div id="map_canvas"></div>