Как добавить слушателя к нескольким маркерам, которые вызывают одну и ту же функцию для отображения направлений при нажатии на карте Google 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
}];

Изменить: это глобальные переменные, чтобы уточнить ^

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

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 ( location [k]) - это 132 местоположения. Я хочу иметь возможность щелкнуть маркер, сохранить его в качестве начальной точки для направления, а затем дождаться нажатия на маркер второго ключа, который будет сохранен в качестве конечной точки. Нажатие на второй маркер вычислит и покажет направления, как 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);
       }
   });

В этот момент никакое информационное окно не отображается, и я получаю сообщение об ошибке "не могу прочитать" положение "неопределенного". Я могу получить указания, чтобы показать, когда я жестко закодировал начальную и конечную точки.

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

Google Maps API V3 - добавить прослушиватель событий для всех маркеров?

а также

Как добавить один и тот же прослушиватель событий ко многим маркерам, а затем провести различие между маркерами в слушателях в google maps api v3?

Answer 1

Если вы получите 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>