Question

在附带的代码中，一旦我点击谷歌地图上的任何标记，我就会尝试显示我的数据库中的一些图片。每个标记与图片相关。

我的问题依赖于代码的最后一部分，在las“for”循环中。当我在console.log（内容）时，我看到我的所有图像标签都显示有正确的图像网址，但是当我点击任何标记时，我只能看到数组上的最后一张图片pictureForMarkers。有谁知道我做错了什么？

的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));
}

Answer 1

似乎您的问题可能是您只声明了一个标记。尝试创建一个数组或标记列表，并将图像引用附加到每个标记，而不是每次都传入唯一的标记变量。

Answer 2

您在最后一个循环中使用的变量marker实际上是undefined，由于您要声明的变量，它没有任何价值在json调用的回调中新的变量marker。

我试试这个：

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));
    });
}

单击标记时的信息窗口谷歌地图ap

2 个答案: