Javascript Google Maps API信息窗口仅显示所有标记的第一个位置

我一直在玩谷歌地图api添加多个标记和样式。我有这一切工作正常，但我不能得到的工作是每个标记的信息窗口。我已经设法让InfoWindow工作了一点，但它只显示了所有标记的第一个位置/地址

请注意，地址/位置将使用CMS系统添加，不会手动添加

以下是我一直使用的代码：

 $(document).ready(function () {
    var map;
    var elevator;
    var myOptions = {
        zoom: 3,
        center: new google.maps.LatLng(50, -30),
        mapTypeId: 'terrain'
    };

    map = new google.maps.Map($('#map_canvas')[0], myOptions);

    var styles = [{"featureType":"water","stylers":[{"color":"#46bcec"},{"visibility":"on"}]},{"featureType":"landscape","stylers":[{"color":"#f2f2f2"}]},{"featureType":"road","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road.highway","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"transit","stylers":[{"visibility":"off"}]},{"featureType":"poi","stylers":[{"visibility":"off"}]}];

    map.setOptions({styles: styles});

    var addresses = [   '10007','75008','28008','21465','SE91AA',];


    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 pinColor = "academia.png";
            var pinImage = new google.maps.MarkerImage("/assets/images/pin-green.png",
            new google.maps.Size(22, 31));

             var contentString =  '<div>'+ addresses[0] +'</div>';


            var marker =  new google.maps.Marker({
                position: latlng,
                map: map,
                clickable: true,
                icon: pinImage,
                title: addresses[0],
                 });

    google.maps.event.addListener(marker, 'click', getInfoCallback(map, contentString));

        });

    }

    function getInfoCallback(map, content) {
        var infowindow = new google.maps.InfoWindow({content: content});
        return function() {
                infowindow.setContent(content); 
                infowindow.open(map, this);
            };
    }


    }

$（文档）.ready（函数（）{
var映射；
无功电梯；
变量myOptions={
缩放：3，
中心：新google.maps.LatLng（50，-30），
mapTypeId:'地形'
};
map=new google.maps.map（$（'#map_canvas'）[0]，myOptions）；
var styles=[{“featureType”：“water”，“styles”：[{“color”：“#46bcec”}，{“visibility”：“on”}，{“featureType”：“landscape”，“styles”：[{“color”：“#F2F2F2F2F2”}}，{“featureType”：“road”，“styles”：[{“saturation”：-100}，{“lightness”：45}，{“featureType”：“road.highway”，“styles”：“简化”}，{“featureType”：“road“labels.icon”、“stylers”：[{“可见性”：“off”}、{“特性类型”：“管理”、“元素类型”：“labels.text.fill”、“stylers”：[{“颜色”：“#44444444”}]}、{“特性类型”：“transit”、“stylers”：[{“可见性”：“off”}]}、{“特性类型”：“poi”、“stylers”：[{“可见性”：“off；
setOptions（{styles:styles}）；
变量地址=['10007'、'75008'、'28008'、'21465'、'SE91AA'、]；
对于（var x=0；x

您在这一行遇到了问题

var contentString=''+地址[0]+'；

您正在添加地址[0]，即数组中的第一个元素，因此它总是显示相同的元素

将其替换为以下内容：

---

var contentString=''+地址[x]+'；

以及

地址[i]

（我使用

i

而不是

x

），我从返回的JSON中添加了

格式化的\u地址

。这些部分只是在我玩的时候添加的。参考下面的代码：

 $(document).ready(function () {
        var map;
        var elevator;
        var myOptions = {
            zoom: 3,
            center: new google.maps.LatLng(50, -30),
            mapTypeId: 'terrain'
        };

        map = new google.maps.Map($('#map_canvas')[0], myOptions);

        var styles = [{ "featureType": "water", "stylers": [{ "color": "#46bcec" }, { "visibility": "on" }] }, { "featureType": "landscape", "stylers": [{ "color": "#f2f2f2" }] }, { "featureType": "road", "stylers": [{ "saturation": -100 }, { "lightness": 45 }] }, { "featureType": "road.highway", "stylers": [{ "visibility": "simplified" }] }, { "featureType": "road.arterial", "elementType": "labels.icon", "stylers": [{ "visibility": "off" }] }, { "featureType": "administrative", "elementType": "labels.text.fill", "stylers": [{ "color": "#444444" }] }, { "featureType": "transit", "stylers": [{ "visibility": "off" }] }, { "featureType": "poi", "stylers": [{ "visibility": "off" }] }];

        map.setOptions({ styles: styles });
        var iterator = 0;
        var addresses = ['10007', '75008', '28008', '21465', 'SE91AA'];

        for (var i = 0; i < addresses.length; i++) {
                MarkMe();
        }

       function MarkMe() {
            var add = addresses[iterator];
            $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + add + '&sensor=false', null, function (data) {
                var p = data.results[0].geometry.location
                var o = data.results[0].formatted_address
                var latlng = new google.maps.LatLng(p.lat, p.lng);
                var pinColor = "academia.png";
                var pinImage = new google.maps.MarkerImage("/images/pin-green.png",
                new google.maps.Size(22, 31));

                var content = '<div style="width: 150px;">' + o + '<br/>' + add + '</div>';

                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map,
                    clickable: true,
                    icon: pinImage,
                    title: o + '<br/>' + add,
                });
                function getInfoCallback(map, content) {
                    var infowindow = new google.maps.InfoWindow({ content: content });
                    return function () {

                        infowindow.setContent(content);
                        infowindow.open(map, this);
                    };
                };
                google.maps.event.addListener(marker, 'click', getInfoCallback(map, content));

            });
            iterator++;
       }
    })

$（文档）.ready（函数（）{
var映射；
无功电梯；
变量myOptions={
缩放：3，
中心：新google.maps.LatLng（50，-30），
mapTypeId:'地形'
};
map=new google.maps.map（$（'#map_canvas'）[0]，myOptions）；
var styles=[{“featureType”：“water”，“stylers”：[{“color”：“#46bcec”}，{“visibility”：“on”}，{“featureType”：“landscape”，“stylers”：[{“color”：“#F2F2F2F2F2F2F2F2”}，{“featureType”：“road”，“stylers”：[{“Sature”：-100}，{“lightness”：45}，{“featureType”：“road.highway”，“stylers”：“visibility”：“simplified”}，{featureType“：“道路.动脉”，“元素类型“：“标签.图标”，“样式器”：[{“可见性”：“关闭”}]，{“特征类型”：“管理”，“元素类型”：“标签.文本.填充”，“样式器”：[{“颜色”：“#44444444”}]，{“特征类型”：“交通”，“样式器”：[{“可见性”：“关闭”}]，{“特征类型”：“poi”，“样式器”：[{“可见性”：“关闭”}]；
setOptions（{styles:styles}）；
var迭代器=0；
变量地址=['10007'，'75008'，'28008'，'21465'，'SE91AA']；
对于（变量i=0；i'+add+''；
var marker=new google.maps.marker({
位置：latlng，
地图：地图，
可点击：正确，
图标：pinImage，
标题：o+'
'+add，
});
函数getInfoCallback（映射、内容）{
var infowindow=new google.maps.infowindow（{content:content}）；
返回函数（）{
infowindow.setContent（content）；
打开（地图，这个）；
};
};
google.maps.event.addListener（标记'click'，getInfoCallback（映射，内容））；
});
迭代器++；
}
})

---

它在我这边起作用，只需根据您的意愿进行自定义..希望我能帮助..

Hi@GPRathour谢谢您的帮助我将地址[0]更改为地址[x]，现在我在ea中显示“未定义”