Javascript 数组项 == “未定义”在谷歌地图功能中

Question

你好 我正在循环一个 JSON 对象并为每个项目创建一个新的地图标记。创建标记后，我将其推送到一个数组（varmarkers）以供将来操作。问题是，当我尝试访问数组项（例如：console.log(markers[3])）时，我得到一个“未定义”值。

下面的相关代码：

var map;
var markers = [];
var activeFilters = [];

function initializeMap() {
    var myLatlng = new google.maps.LatLng( 51.506873, -0.125141);
    var myOptions = {
        zoom: 14,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true
    }
    map = new google.maps.Map(document.getElementById("location_map"), myOptions);


    $.getJSON('../js/hotspots.json', function(data) {
        var hotspots = data.scenes[0].hotspots;
        $.each(hotspots, function(i) {

            var lat = hotspots[i].latitude;
            var lon = hotspots[i].longitude;
            var point = new google.maps.LatLng(lat,lon);

            var cat = hotspots[i].hotspottype;
            var weburl = hotspots[i].weburl;

            var marker = addMarker(point,cat,weburl);
        });

    });


}

function addMarker(point, cat, weburl) {
    var markerUrl = weburl;
    var marker = new google.maps.Marker({
        position: point,
        map: map
    });

    marker.category = cat;
    markers.push(marker);
};

initializeMap();
console.log(markers[3]);

任何帮助将不胜感激。

Answer 1

get json 异步运行。试试这个：

$.getJSON('../js/hotspots.json', function(data) {
    var hotspots = data.scenes[0].hotspots;
    $.each(hotspots, function(i) {
        var lat = hotspots[i].latitude;
        var lon = hotspots[i].longitude;
        var point = new google.maps.LatLng(lat,lon);
        var cat = hotspots[i].hotspottype;
        var weburl = hotspots[i].weburl;
        var marker = addMarker(point,cat,weburl);
    });
    console.log(markers);
});

Answer 2

尝试一下，

console.log(markers[0]);

因为查看您的代码，markers 数组中只有一个元素。

如果您要在该数组中放入 4 个元素，那么使用 markers[3] 您将访问第四个元素。

Answer 3

尝试：

initializeMap();
setTimeout(function(){
    console.log(markers[3]);
}, 10000);