单击标记 google 时的信息 window 映射 ap
Info window when clicking on a marker google maps ap
在附加的代码中,我试图在单击 google 地图上的任何标记后显示我数据库中的一些图片。每个标记都与一张图片相关。
我的问题取决于代码的最后一部分,即 las "for" 循环。当我 console.log(content) 时,我看到我的所有图像标签都显示了正确的图像 url,但是当我单击任何标记时,我只看到数组 picturesForMarkers 中的最后一张图片。有人知道我做错了什么吗?
Javascript
var addresses = [];
var picturesForMarkers = [];
var divPictureLatitude = $('.pictures');
$.each(divPictureLatitude, function (i, val) {
addresses.push(val.children[1].value + ", " + val.children[2].value);
picturesForMarkers.push(val.children[0].src);
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (var x = 0; x < addresses.length; x++) {
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + addresses[x] + '&sensor=false', null, function (data) {
var p = data.results[0].geometry.location
var latlng = new google.maps.LatLng(p.lat, p.lng);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
});
}
for (var x = 0; x < picturesForMarkers.length; x++) {
google.maps.event.addListener(marker, 'click', (function (marker, x) {
return function () {
var content = '<img src="' + picturesForMarkers[x] + '" style="width:300px;">';
console.log(content)
infowindow.setContent(content);
infowindow.open(map, marker);
}
})(marker, x));
}
看来您的问题可能是您只声明了一个标记。尝试创建一个标记数组或列表,并将图像引用附加到每个标记,而不是每次都传入唯一的标记变量。
您在最后一个循环中使用的变量 marker
实际上是 undefined
,它没有任何值,因为您正在声明一个新变量 marker
在 json 调用的回调中。
我会试试这个:
var addresses = [];
var picturesForMarkers = [];
var divPictureLatitude = $('.pictures');
$.each(divPictureLatitude, function (i, val) {
addresses.push(val.children[1].value + ", " + val.children[2].value);
picturesForMarkers.push(val.children[0].src);
});
var infowindow = new google.maps.InfoWindow();
var i; // I removed marker.
for (var x = 0; x < addresses.length; x++) {
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + addresses[x] + '&sensor=false', null, function (data) {
var p = data.results[0].geometry.location;
var latlng = new google.maps.LatLng(p.lat, p.lng);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
// The marker has been added to the map, add the event to the marker.
google.maps.event.addListener(marker, 'click', (function (marker, x) {
return function () {
var content = '<img src="' + picturesForMarkers[x] + '" style="width:300px;">';
console.log(content);
infowindow.setContent(content);
infowindow.open(map, marker);
};
})(marker, x));
});
}
在附加的代码中,我试图在单击 google 地图上的任何标记后显示我数据库中的一些图片。每个标记都与一张图片相关。
我的问题取决于代码的最后一部分,即 las "for" 循环。当我 console.log(content) 时,我看到我的所有图像标签都显示了正确的图像 url,但是当我单击任何标记时,我只看到数组 picturesForMarkers 中的最后一张图片。有人知道我做错了什么吗?
Javascript
var addresses = [];
var picturesForMarkers = [];
var divPictureLatitude = $('.pictures');
$.each(divPictureLatitude, function (i, val) {
addresses.push(val.children[1].value + ", " + val.children[2].value);
picturesForMarkers.push(val.children[0].src);
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (var x = 0; x < addresses.length; x++) {
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + addresses[x] + '&sensor=false', null, function (data) {
var p = data.results[0].geometry.location
var latlng = new google.maps.LatLng(p.lat, p.lng);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
});
}
for (var x = 0; x < picturesForMarkers.length; x++) {
google.maps.event.addListener(marker, 'click', (function (marker, x) {
return function () {
var content = '<img src="' + picturesForMarkers[x] + '" style="width:300px;">';
console.log(content)
infowindow.setContent(content);
infowindow.open(map, marker);
}
})(marker, x));
}
看来您的问题可能是您只声明了一个标记。尝试创建一个标记数组或列表,并将图像引用附加到每个标记,而不是每次都传入唯一的标记变量。
您在最后一个循环中使用的变量 marker
实际上是 undefined
,它没有任何值,因为您正在声明一个新变量 marker
在 json 调用的回调中。
我会试试这个:
var addresses = [];
var picturesForMarkers = [];
var divPictureLatitude = $('.pictures');
$.each(divPictureLatitude, function (i, val) {
addresses.push(val.children[1].value + ", " + val.children[2].value);
picturesForMarkers.push(val.children[0].src);
});
var infowindow = new google.maps.InfoWindow();
var i; // I removed marker.
for (var x = 0; x < addresses.length; x++) {
$.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + addresses[x] + '&sensor=false', null, function (data) {
var p = data.results[0].geometry.location;
var latlng = new google.maps.LatLng(p.lat, p.lng);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
// The marker has been added to the map, add the event to the marker.
google.maps.event.addListener(marker, 'click', (function (marker, x) {
return function () {
var content = '<img src="' + picturesForMarkers[x] + '" style="width:300px;">';
console.log(content);
infowindow.setContent(content);
infowindow.open(map, marker);
};
})(marker, x));
});
}