我知道这个问题已在堆栈溢出上发布。但是我已经在工作了几天，但解决方案都没有奏效。我会发布我正在做的一切，也许有人会看到我的错误。我宁愿对其他现有问题发表评论，但是需要50个代表...我希望有足够的评论可以帮助您阅读代码，但让我总结一下。我具有地图的初始化函数。由于我的地图是关于方向的，因此有一个calcroute（）函数。此功能从Google获得了一条路线，并将其放入地图上。我还沿着路线上放了一些标记，那就是帕克斯托列赛。因此，如果Ajax成功返回，我将通过数据解析并添加标记。就在创建标记的下方，我试图为Infowdowd添加一个事件侦听器，但它行不通。我想知道一个概念，因为我想拥有一个标题，小描述，也许是缩略图，并具有详细信息页面的标题链接。
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带来了实际标记。我有一个位置的" ParkStoplaceArray"列表，并且循环通过创建标记并放置它。除了能够单击标记的能力外，一切都起作用。
编辑：因此，我根据注释进行了更改，现在单击任何标记，在一个项目上显示一个InfowDOWOW。任何标记单击将通过同一标记显示相同的单个信息窗口
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);
});
}
要澄清：您想知道如何在单击标记时关闭其他信息窗口。
答案是使用单个信息窗口。因此，您的原始代码更加接近。
要使原始代码工作您应该像这样编写循环（因为循环内有函数封闭）
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);
我相信您的问题在于您处理InfowDOWNOW的方式。您应该按照以下方式遵循图案：
- 为每个点创建一个标记（Park）
- 创建一个具有标记所需内容的Infowdowd
- 将Infowdow添加到标记
- 添加一个为标记的事件处理程序打开您添加到其中的InfowDIDDOW。
您正在做的是：
- 创建一个单一的Infowdow
- 为每个点创建一个标记（Park）
- 为每个标记添加一个事件处理程序，它打开没有攻击任何事物的单个InfowDindow。
尝试修改：
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);
});
好吧，我在评论的帮助下得到了
的帮助问题是设置标记物作为属性的Infowdow，而事件侦听器使用此插图而不是标记。这是我所做的更改，我完全删除了全局infowdindow
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);
});