我知道这个问题已遍布堆栈溢出。但我已经在这里工作了好几天，但没有一个解决方案有效。我会发布我正在做的所有事情，也许有人会看到我的错误。我更愿意对其他现有问题发表评论，但需要50个代表...我希望有足够的评论来帮助您阅读代码，但让我总结一下。我有地图的初始化功能。由于我的地图是关于方向的，因此有一个calcRoute（）函数。此功能从谷歌获取路线，并放入地图。我还在路线上放置了一些标记，即parkToPlaceArray。所以如果ajax成功返回，我会解析数据并添加标记。在下面创建标记我试图为infowindow添加一个事件监听器，但它不起作用。我希望得到一个概念，因为我希望有一个标题，小描述，可能是一个缩略图，并有标题链接到详细信息页面。
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var infowindow;
var parksToPlaceArray = [];
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var desoto = new google.maps.LatLng(27.521692, -82.643475); // just a default start value to the map
var mapOptions = {
zoom: 15,
center: desoto
};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
directionsDisplay.setMap(map);
// Resize stuff...
// makes the map responsive by continuously centering the map on resize
google.maps.event.addDomListener(window, "resize", function () {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
infowindow = new google.map.InfoWindow();
// marker click
//google.maps.event.addListener(marker, 'click', function () {
// //map.setZoom(8);
// //map.setCenter(marker.getPosition());
//});
}
function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
// This ajax call goes out to loadparksbyroute.cshtml with the bounds of the route, and returns a json array of possible parks
$.ajax({
dataType: "json",
type: "POST",
url: "/getDataPage",
success: function (ajaxResponse) {
// SUCCESS FUNCTION - RETURNED FROM AJAX ==================================================================
var parksResponse = ajaxResponse;
// we now have a list of all locations in the zone
parksToPlaceArray = getParks();
for (i = 0; i < parksToPlaceArray.length; i++) {
var myLatlng = new google.maps.LatLng(parksToPlaceArray[i].addresses[0].latitude, parksToPlaceArray[i].addresses[0].longitude);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: parksToPlaceArray[i].recAreaName
});
//google.maps.event.addListener(marker, 'click', (function (marker, i) {
// return function () {
// infowindow.setContent('<h3>' + this.title + '</h3>');
// infowindow.open(map, marker);
// }
//})(marker, i));
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent('<h3>' + this.title + '</h3>');
infowindow.open(map, this);
});
}
},
// END OF SUCCESS FUNCTION FROM AJAX CALL
error: function (response) {
console.log('error');
}
});
}
});
}
// when the page loads initialize the map
google.maps.event.addDomListener(window, 'load', initialize);
我尝试了几个不同的地方来放置事件监听器。因为实际的标记是使用ajax引入的，所以我无法将其置于初始化中。我有一个地点列表和parkToPlaceArray＆＃39;然后我循环创建一个标记并放置它。除了能够点击标记之外，一切都有效。
编辑：所以我根据评论进行了更改，现在点击任何标记显示一个项目的一个信息窗口。任何标记点击都会在同一标记上显示相同的单个信息窗口
for (i = 0; i < parksToPlaceArray.length; i++) {
var myLatlng = new google.maps.LatLng(parksToPlaceArray[i].addresses[0].latitude, parksToPlaceArray[i].addresses[0].longitude);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: parksToPlaceArray[i].recAreaName
});
//google.maps.event.addListener(marker, 'click', (function (marker, i) {
// return function () {
// infowindow.setContent('<h3>' + this.title + '</h3>');
// infowindow.open(map, marker);
// }
//})(marker, i));
var contentString = parksToPlaceArray[i].recAreaName;
marker.infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function () {
marker.infowindow.open(map, marker);
});
}
答案 0 :(得分：2)
澄清一下：您想知道在单击标记时如何关闭其他信息窗口。
答案是使用单个信息窗口。所以你更接近原始代码。
要使原始代码工作，你应该像这样编写for循环（因为循环中有一个函数闭包）
for (i = 0; i < parksToPlaceArray.length; i++) (function(i) {
// ...
})(i);
所以你应该写
for (i = 0; i < parksToPlaceArray.length; i++) (function(i) {
var myLatlng = new google.maps.LatLng(
parksToPlaceArray[i].addresses[0].latitude,
parksToPlaceArray[i].addresses[0].longitude);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: parksToPlaceArray[i].recAreaName
});
marker.addListener('click', function() {
infowindow.setContent('<h3>' + marker.title + '</h3>');
infowindow.open(map, marker);
});
})(i);
答案 1 :(得分：1)
我相信你的问题与你处理信息的方式有关。你应该按照以下方式遵循一个模式：
你在做的是：
尝试修改：
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: parksToPlaceArray[i].recAreaName
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent('<h3>' + this.title + '</h3>');
infowindow.open(map, this);
});
对于以下内容：
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: parksToPlaceArray[i].recAreaName
});
marker.infowindow = new google.maps.InfoWindow({ content: '<h3>' + this.title + '</h3>' });
google.maps.event.addListener(marker, 'click', function () {
this.infowindow.open(map, this);
});
答案 2 :(得分：0)
好的，我在评论的帮助下得到了它
问题是为标记设置了一个infowindow作为属性，事件监听器使用它而不是标记。以下是我所做的更改，我完全删除了全局信息窗
var contentString = '<h3>' + parksToPlaceArray[i].recAreaName + '</h3>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: parksToPlaceArray[i].recAreaName,
infowindow: infowindow
});
google.maps.event.addListener(marker, 'click', function () {
this.infowindow.open(map, this);
});