Javascript数组推送（Salt n Pepa风格）

嘿，我需要一些帮助来为谷歌地图API V3添加我的阵列

下面是我用位置标记填充地图的代码：

var geocoder;
var map;
var infowindow = null;
var addresses = [];
var theMarkers = [];

function initialize() {
    var centerMap = new google.maps.LatLng(45.3517923, 6.3101660);

    geocoder = new google.maps.Geocoder();    
    addresses.push("11111","22222","33333");

    for(i in addresses) {
          var address = addresses[i];

          geocoder.geocode( { 'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var bounds = new google.maps.LatLngBounds();

                map.setCenter(results[0].geometry.location);

                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });

                var tmpAddress = results[0].formatted_address;

                tmpAddress = tmpAddress.split(',');             
                theMarkers.push([tmpAddress[0], results[0].geometry.location.lat(), results[0].geometry.location.lng(), i, 'This location is ' + tmpAddress[0]]);
            } else {
                alert('Geocode was not successful for the following reason: ' + status);
            }
          });
    }

    /*theMarkers = [
        ['city1', 00.0000, -00.000000, 1, 'This is HTML Test 1'],
        ['city2', 00.00000, -00.000000000, 2, 'This is HTML Test 2'],
        ['city3', 00.00000, -00.000000, 3, 'This is HTML Test 3']
    ];*/

    var mapOptions = {
        zoom: 0,
        center: centerMap,
        panControl: false,
        zoomControl: false,
        scaleControl: false,
        streetViewControl: false,
        mapTypeControl: false
    }

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 
    setZoom(map, theMarkers);
    setMarkers(map, theMarkers);    

    infowindow = new google.maps.InfoWindow({
        content: "Loading..."
    });
}

function setZoom(map, markers) {
    var boundbox = new google.maps.LatLngBounds();

    for ( var i = 0; i < markers.length; i++ )
    {
      boundbox.extend(new google.maps.LatLng(markers[i][1], markers[i][2]));
    }

    map.setCenter(boundbox.getCenter());
    map.fitBounds(boundbox);
}

function setMarkers(map, markers) {
    for (var i = 0; i < markers.length; i++) {
        var site = markers[i];
        var site = markers[i];
        var siteLatLng = new google.maps.LatLng(site[1], site[2]);      
        var marker = new google.maps.Marker({
            position: siteLatLng,
            map: map,
            title: site[0],
            zIndex: site[3],
            html: site[4],
            draggable: false,
            //Markers drop on the map
            animation: google.maps.Animation.DROP
        });

        google.maps.event.addListener(marker, "click", function () {
            infowindow.setContent(this.html);
            infowindow.open(map, this);
            //marker.setAnimation(google.maps.Animation.BOUNCE);
        });
    }
}

然后，地图如下所示：

---

我需要让它在循环中运行。

地理编码器是异步的，您需要在最后一次回调中设置缩放以运行。最简单的修复方法是将bounds.extend/fitBounds移动到回调中，并使边界为全局：

bounds.extend(results[0].geometry.location);
geocodedResults++;
if (geocodedResults >= (addresses.length - 1)) map.fitBounds(bounds);

更新的初始化函数：

function initialize() {
    var centerMap = new google.maps.LatLng(45.3517923, 6.3101660);

    geocoder = new google.maps.Geocoder();
    addresses = ["New York, NY", "Newark, NJ", "Philadelphia, PA"];

    for (var i = 0; i < addresses.length; i++) {
        var address = addresses[i];
        geocoder.geocode({
            'address': address
        }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);

                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });

                var tmpAddress = results[0].formatted_address;

                tmpAddress = tmpAddress.split(',');
                theMarkers.push([tmpAddress[0], results[0].geometry.location.lat(), results[0].geometry.location.lng(), i, 'This location is ' + tmpAddress[0]]);
                bounds.extend(results[0].geometry.location);
                geocodedResults++;
                if (geocodedResults >= (addresses.length - 1)) map.fitBounds(bounds);
            } else {
                alert('Geocode was not successful for the following reason: ' + status);
            }
        });
    }

    var mapOptions = {
        zoom: 0,
        center: centerMap,
        panControl: false,
        zoomControl: false,
        scaleControl: false,
        streetViewControl: false,
        mapTypeControl: false
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    setMarkers(map, theMarkers);

    infowindow = new google.maps.InfoWindow({
        content: "Loading..."
    });
}

代码段：

var映射； var bounds=new google.maps.LatLngBounds； var infowindow=null； var地址=[]； var theMarkers=[]； var geocodedResults=0； 函数geocodeAddressaddress，i{ 地理编码{ “地址”：地址 }，功能结果，状态{ 如果status==google.maps.GeocoderStatus.OK{ map.setCenterresults[0].geometry.location； var marker=new google.maps.marker{ 地图：地图， 位置：结果[0]。几何体。位置 }; var tmpAddress=results[0]。格式化的\u地址； tmpAddress=tmpAddress.split'，'； markers.push[tmpAddress[0]，results[0]。geometry.location.lat，results[0]。geometry.location.lng，i，'此位置为'+tmpAddress[0]]； bounds.extendresults[0].geometry.location； geocodedResults++； 如果geocodedResults>=addresses.length-1 map.fitbundsbounds； }否则{ 警报“地理代码未成功，原因如下：”+状态； } }; } 函数初始化{ var centerMap=new google.maps.LatLng45.3517923,6.3101660； geocoder=新的google.maps.geocoder； 地址=[纽约州纽约市，新泽西州纽瓦克市，宾夕法尼亚州费城]； 对于变量i=0；i我很想就这个题目单独投票，但那将是对我权力的滥用-geocoder是异步的，您需要在最后一次回调中设置缩放以运行。@geocodezip是否介意显示一个这样的示例？这似乎也不起作用。它放大了，但1它不是正确的位置，2它在地图上不再有我的3个标记？控制台中没有错误。也许您可以提供一个小提琴来演示这个问题。问题中提供的小提琴起作用了。

function initialize() {
    var centerMap = new google.maps.LatLng(45.3517923, 6.3101660);

    geocoder = new google.maps.Geocoder();
    addresses = ["New York, NY", "Newark, NJ", "Philadelphia, PA"];

    for (var i = 0; i < addresses.length; i++) {
        var address = addresses[i];
        geocoder.geocode({
            'address': address
        }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                map.setCenter(results[0].geometry.location);

                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });

                var tmpAddress = results[0].formatted_address;

                tmpAddress = tmpAddress.split(',');
                theMarkers.push([tmpAddress[0], results[0].geometry.location.lat(), results[0].geometry.location.lng(), i, 'This location is ' + tmpAddress[0]]);
                bounds.extend(results[0].geometry.location);
                geocodedResults++;
                if (geocodedResults >= (addresses.length - 1)) map.fitBounds(bounds);
            } else {
                alert('Geocode was not successful for the following reason: ' + status);
            }
        });
    }

    var mapOptions = {
        zoom: 0,
        center: centerMap,
        panControl: false,
        zoomControl: false,
        scaleControl: false,
        streetViewControl: false,
        mapTypeControl: false
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    setMarkers(map, theMarkers);

    infowindow = new google.maps.InfoWindow({
        content: "Loading..."
    });
}