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

Set google.maps.Marker icon using multidimensional array in for loop

本文关键字：设置 数组 google maps 图标 Marker 循环 for      更新时间：2023-09-26

我一直在玩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);

$.getJSON成功函数内的第二个console.log(addresses[i][2]);全部输出为"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)
                      }
            });
        });
    }
...

我是不是搞错了？

使用函数闭包保持循环中i与创建的标记的关联。类似于这个问题：Google Maps JS API v3-Simple Multiple Marker Example为信息窗口内容做这件事。

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

工作小提琴

代码片段：

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);
html, body, #map_canvas {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}
<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>

相关文章：