Question

我一直在使用Google Maps Javascript API v3并尝试让它根据多维数组显示图标。

一切都很好，直到我尝试从for循环中定义相对于'i'的图标，我想我犯了一个简单的错误。

以下代码显示错误：Uncaught TypeError: Cannot read property '2' of undefined

function initialize() {
    var map;
    var myOptions = {
        zoom: 14,
        center: new google.maps.LatLng(53.382971,-1.4702737),
        mapTypeId: 'roadmap',
        panControl: false,
        streetViewControl: false,
        mapTypeControl: false,
        zoomControl: false
    };
    map = new google.maps.Map($('#map_canvas')[0], myOptions);

    var addresses = [
     ["S1 4EJ", "Available", "/img/green-marker.png"], 
     ["S1 4QW", "Available", "/img/green-marker.png"],
     ["S1 2HE", "Let Agreed", "/img/red-marker.png"]
    ];

    for (var i = 0; i < addresses.length; i++) {
        console.log(i);
        $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[i][0]+'&sensor=false', null, function (data) {
            var p = data.results[0].geometry.location
            var latlng = new google.maps.LatLng(p.lat, p.lng);

            console.log(i);

            new google.maps.Marker({
                position: latlng,
                map: map,
                icon: {
                        url: addresses[i][2],
                        size: new google.maps.Size(50, 50),
                        origin: new google.maps.Point(0,0),
                        anchor: new google.maps.Point(25, 50)
                      }
            });

        });
    }

}; 
google.maps.event.addDomListener(window, "load", initialize);

console.log(addresses[i][2]);成功函数中的第二个$.getJSON全部输出为'3'。

将addresses[i][2]移到$.getJSON函数之外但仍然在for循环内输出它们作为'i'的最后一次调用迭代，例如：

...
for (var i = 0; i < addresses.length; i++) {
        console.log(i);

        var image = addresses[i][2];

        $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[i][0]+'&sensor=false', null, function (data) {
            var p = data.results[0].geometry.location
            var latlng = new google.maps.LatLng(p.lat, p.lng);

            console.log(i);

            new google.maps.Marker({
                position: latlng,
                map: map,
                icon: {
                        url: image,
                        size: new google.maps.Size(50, 50),
                        origin: new google.maps.Point(0,0),
                        anchor: new google.maps.Point(25, 50)
                      }
            });

        });
    }
...

我是以错误的方式解决这个问题吗？

Answer 1

使用函数闭包来保持循环中i与创建的标记的关联。与此问题类似：Google Maps JS API v3 - Simple Multiple Marker Example为infowindow内容做了什么。

for (var i = 0; i < addresses.length; i++) {
    console.log(i);

    var image = addresses[i][2];

    $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + addresses[i][0] + '&sensor=false', null, (function (i, image) {
        return function (data) {
            var p = data.results[0].geometry.location;
            var latlng = new google.maps.LatLng(p.lat, p.lng);

            console.log(i);

            new google.maps.Marker({
                position: latlng,
                map: map,
                icon: {
                    url: image,
                    size: new google.maps.Size(50, 50),
                    origin: new google.maps.Point(0, 0),
                    anchor: new google.maps.Point(25, 50)
                }
            });

        }
    })(i, image));
}

working fiddle

代码段：

＆＃13;

function initialize() {
    var map;
    var myOptions = {
        zoom: 14,
        center: new google.maps.LatLng(53.382971, -1.4702737),
        mapTypeId: 'roadmap',
        panControl: false,
        streetViewControl: false,
        mapTypeControl: false,
        zoomControl: false
    };
    map = new google.maps.Map($('#map_canvas')[0], myOptions);

    var addresses = [
        ["S1 4EJ", "Available", "http://maps.google.com/mapfiles/ms/icons/green.png"],
        ["S1 4QW", "Available", "http://maps.google.com/mapfiles/ms/icons/green.png"],
        ["S1 2HE", "Let Agreed", "http://maps.google.com/mapfiles/ms/icons/blue.png"]
    ];

    for (var i = 0; i < addresses.length; i++) {
        console.log(i);

        var image = addresses[i][2];

        $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address=' + addresses[i][0] + '&sensor=false', null, (function (i, image) {
            return function (data) {
                var p = data.results[0].geometry.location;
                var latlng = new google.maps.LatLng(p.lat, p.lng);

                console.log(i);

                new google.maps.Marker({
                    position: latlng,
                    map: map,
                    icon: {
                        url: image,
                        size: new google.maps.Size(50, 50),
                        origin: new google.maps.Point(0, 0),
                        anchor: new google.maps.Point(25, 50)
                    }
                });

            }
        })(i, image));
    }

}
google.maps.event.addDomListener(window, "load", initialize);

＆＃13;

html, body, #map_canvas {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>

＆＃13;

在for循环中使用多维数组设置google.maps.Marker图标

1 个答案: