如何在多個標記中添加偵聽器，這些標記調用相同的函數以在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
}];

編輯：這些是全局變量，只是為了闡明^

我要創建“單擊標記以獲取路線”功能。 到目前為止，我已經在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個位置。 我希望能夠單擊一個標記，將其保存為路線的起點，然后等待單擊secnond標記，該標記將另存為終點。 單擊第二個標記將按照下面的方法嘗試計算並顯示路線：

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，則保存起來不會有什么大不了的。 我嘗試在點擊時實現這一目標並獲得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>