如何在googlemapsapiv3中为多个标记添加一个监听器，这些标记调用相同的函数来显示点击时的方向

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"one_answers"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列表(locations[k])总共有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);
}
});

在这一点上，没有显示任何信息窗口，我得到了一个错误，说"无法读取未定义的‘位置’"。当我硬编码起点和终点时，我可以得到要显示的方向。

以下线程涉及相同的想法，但没有回答所有标记的侦听器问题，我认为这是主要问题。

谷歌地图API V3-将事件侦听器添加到所有标记？

和

如何将相同的事件侦听器添加到许多标记中，然后在googlemapsapiv3中区分侦听器中的标记？

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>