使用google maps javascript api v3的具有唯一信息窗口的多个标记
我知道这个问题到处都是。但是我已经做了好几天了，没有一个解决方案有效。我会发布我正在做的一切，也许有人会看到我的错误。我更愿意对其他现存的问题发表评论，但有一个50人的要求。。。我希望有足够的注释来帮助您阅读代码，但让我总结一下。我有地图的初始化功能。因为我的地图是关于方向的，所以有一个calcRoute（）函数。此函数从google获取路线，并输入地图。我还沿着路线放置了一些标记，那就是停车场。因此，如果ajax成功返回，我将解析数据并添加标记。就在创建标记的下面，我尝试为infowindow添加一个事件侦听器，但它不起作用。我想开始一个概念，因为我想有一个标题，小说明，可能是一个缩略图，并有标题链接到详细信息页面使用google maps javascript api v3的具有唯一信息窗口的多个标记,javascript,ajax,google-maps,google-maps-api-3,Javascript,Ajax,Google Maps,Google Maps Api 3,我知道这个问题到处都是。但是我已经做了好几天了，没有一个解决方案有效。我会发布我正在做的一切，也许有人会看到我的错误。我更愿意对其他现存的问题发表评论，但有一个50人的要求。。。我希望有足够的注释来帮助您阅读代码，但让我总结一下。我有地图的初始化功能。因为我的地图是关于方向的，所以有一个calcRoute（）函数。此函数从google获取路线，并输入地图。我还沿着路线放置了一些标记，那就是停车场。因此，如果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);
var方向显示；
var directionsService=new google.maps.directionsService（）；
var映射；
var信息窗口；
var ParkstorpArray=[]；
函数初始化（）{
directionsDisplay=new google.maps.DirectionsRenderer（）；
var desoto=new google.maps.LatLng（27.521692，-82.643475）；//只是地图的默认起始值
变量映射选项={
缩放：15，
中心：德索托
};
map=new google.maps.map（document.getElementById（“地图画布”），mapOptions）；
方向显示.setMap（地图）；
//调整大小的东西。。。
//通过连续将贴图居中调整大小，使贴图响应
google.maps.event.addDomListener（窗口，“调整大小”，函数（）{
var center=map.getCenter（）；
google.maps.event.trigger（map，“resize”）；
地图设置中心（中心）；
});
infowindow=new google.map.infowindow（）；
//标记单击
//google.maps.event.addListener（标记，'click'，函数（）{
////map.setZoom（8）；
////map.setCenter（marker.getPosition（））；
//});
}
函数calcRoute（）{
var start=document.getElementById（'start'）.value；
var end=document.getElementById（'end'）.value；
var请求={
来源：start，
目的地:完，
travelMode:google.maps.travelMode.DRIVING
};
路由（请求、功能（响应、状态）{
if（status==google.maps.directionstatus.OK）{
方向显示。设置方向（响应）；
//这个ajax调用使用路由的边界去loadparksbyroute.cshtml，并返回一个可能的parks的json数组
$.ajax({
数据类型：“json”，
类型：“POST”，
url:“/getDataPage”，
成功：功能（ajaxResponse）{
//成功函数-从AJAX返回==================================================================
var parksResponse=ajaxResponse；
//我们现在有一个区域内所有位置的列表
ParkstopReplacarray=getParks（）；
对于（i=0；ifor (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);
});
}
{
var myLatlng=new google.maps.LatLng（parkstopeacarray[i]。地址[0]。纬度，parkstopeacarray[i]。地址[0]。经度）；
var marker=new google.maps.marker({
职位：myLatlng，
地图：地图，
标题：ParkstopReplacarray[i].重新命名
});
//google.maps.event.addListener（标记，'click'，（函数（标记，
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);
});
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);
});
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);