Question

我正在尝试使用Google Maps Utility插件（InfoBox）为Google地图标记添加信息框。我正面临着定义内容价值的问题。我得到的只是一个“未定义”而不是实际文本。

请帮我找到问题所在。感谢。

<script>

var addressArray = ['Beatrice, US', '1790 Inman Valley', 'Connaught Place, New Delhi'];
var userInfox = ['My Name', 'Shannell ', 'XtraWize'];

var geocoder = new google.maps.Geocoder();
var markerBounds = new google.maps.LatLngBounds();

function mapInit() {

    var originLat = '54';
    var originLong = '-2';
    var latlng = new google.maps.LatLng(originLat, originLong);

    var mapOptions = {
       zoom: 2,
       center: latlng,
       navigationControl: true,
       mapTypeControl: false,
       mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    addMarkers(); // add the markers and info windows to the map

}


function addMarkers() {
    for (var i = 0; i < addressArray.length; i++) {

        geocoder.geocode( { 'address': addressArray[i] }, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location
                        });
                markerBounds.extend(results[0].geometry.location);
                map.fitBounds(markerBounds);

                var boxText = document.createElement('div');
                boxText.style.cssText = 'border: 1px solid black; background: #DDD; padding: 5px;';
                boxText.innerHTML = '<bold>'+ userInfox[i] +' &mdash; Random Text</bold>';

                var boxOptions = {
                    content: boxText, 
                    disableAutoPan: false,
                    maxWidth: 0,
                    pixelOffset: new google.maps.Size(-140, 0),
                    zIndex: null,
                    boxStyle: { 
                      background: 'url(tipbox.gif) no-repeat',
                      opacity: 0.75,
                      width: '280px'
                     },
                    closeBoxMargin: '2px 2px 2px 2px',
                    closeBoxURL: 'http://www.google.com/intl/en_us/mapfiles/close.gif',
                    infoBoxClearance: new google.maps.Size(1, 1),
                    isHidden: false,
                    pane: 'floatPane',
                    enableEventPropagation: false
                };

                var ib = new InfoBox(boxOptions);
                google.maps.event.addListener(marker, 'click', function (e) {
                    ib.open(map, this);
                });

            }
        });
    }
}


google.maps.event.addDomListener(window, 'load', mapInit);

</script>

在userInfox [I]的上述代码中，对于所有标记，i的值为“3”。不确定为什么？

Answer 1

这是解决方案。我没有保存“我”的价值。所以我总是最终得到循环中i的最后一个值。

function addMarkers() {
for (var i = 0; i < addressArray.length; i++) {

(function(j) {

geocoder.geocode( { 'address': addressArray[j] }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
        var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
        });
markerBounds.extend(results[0].geometry.location);
map.fitBounds(markerBounds);
var boxText = document.createElement('div');
boxText.style.cssText = 'border: 1px solid black; background: #DDD; padding: 5px;';
boxText.innerHTML = j + '<strong>'+ userInfox[j] + ' &mdash; ' + addressArray[j];

var boxOptions = {
    content: boxText, 
    disableAutoPan: false,
    maxWidth: 0,
    pixelOffset: new google.maps.Size(-140, 0),
    zIndex: null,
    boxStyle: { 
    background: 'url(tipbox.gif) no-repeat',
    opacity: 0.75,
    width: '280px'},
    closeBoxMargin: '2px 2px 2px 2px',
    closeBoxURL: 'http://www.google.com/intl/en_us/mapfiles/close.gif',
    infoBoxClearance: new google.maps.Size(1, 1),
    isHidden: false,
    pane: 'floatPane',
    enableEventPropagation: false
    };

    var ib = new InfoBox(boxOptions);
    google.maps.event.addListener(marker, 'click', function (e) {
    ib.open(map, this);
    });
    }
    });
}) (i);
}
}

Google地图信息框内容“未定义”错误

1 个答案: