Question

我一直在玩谷歌地图api添加多个标记和样式。我有这一切正常工作，但我无法工作的是每个标记的InfoWindow。我设法让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);
            };
    }


    }

Answer 1

你在这一行有问题

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

您正在添加address[0]，即数组中的第一个元素，因此它始终显示相同的元素。

将其替换为以下内容，

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

Answer 2

与adresses[i]（我使用i而不是x）一起，我从返回的JSON中添加了formatted_address。这些部分只是在我玩的时候添加..请参考下面的代码：

 $(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++;
       }
    })

它正在我这边工作，只是根据你的意愿定制..希望我帮助..

Google Maps API InfoWindow仅显示所有标记的第一个位置

2 个答案: