如何标注多个地理编码位置

Question

我的应用程序中有一个页面，它试图在地图上显示许多地址。我希望能够以数字顺序标记它们，并在信息窗口中显示有关该位置的相关数据。这是我的代码

//init info window
var infoWindow = new google.maps.InfoWindow;
var onMarkerMouseover = function() {
    var marker = this;
    infoWindow.setContent(marker.details);
    infoWindow.open(map, marker);
}
var form = document.getElementById('routeOptions');
    var i;
    var post_data = '';
    var wo_count = 1;
    var bounds = new google.maps.LatLngBounds();
    var geocoder = new google.maps.Geocoder();
    var addressMap = {};
    for (i = 0; i < form.elements.length; i++) {
        if (form.elements[i].id.indexOf('maploc') == '0') {
            if (form.elements[i].id.indexOf('[start]') > 0
                || form.elements[i].id.indexOf('[end]') > 0) {
                continue;
            }
            var values = form.elements[i].value.split('::');
            var address = values[0] + ', ' + values[1] + ', ' + values[2] + ', wo_count:' + wo_count
            var latLng;
            geocoder.geocode({
                'address': address
            }, function(results, status) {
                if (status == 'OK') {
                    var content = 'WO#:&nbsp;' + jq('#wo_number_'
                        + wo_count).html() + '<br />'
                        + $('#address_'+ wo_count).html()+'&nbsp;'
                        + $('#city_'+ wo_count).html()+',&nbsp;'
                        + $('#state_'+ wo_count).html()+'&nbsp;'
                        + $('#zip_'+ wo_count).html()+'<br />'
                        + $('#work_type_'+wo_count).html();
                    //draw the marker
                    var marker = new google.maps.Marker({
                        position: results[0]['geometry']['location'],
                        map: window.map,
                        label: wo_count+"",
                        details: content
                    });
                    google.maps.event.addListener(marker, 'mouseover', onMarkerMouseover);
                    bounds.extend(marker.getPosition());
                    map.fitBounds(bounds);
                } else {
                    alert("Unable to find address. Contact Support if the problem persists");
                    return;
                }
            });
            wo_count++;
        }
    }

此代码的主要问题是，尽管wo_count作为变量可用于定义的回调函数，但它的值每次都会出错。例如，如果我有 3 个地址，那么每个位置的 wo_count 值将始终为 4，因为递增它的代码完成速度比谷歌可以响应的速度快。我也不能按照回复返回的顺序分配数字，因为谷歌可能不会按顺序返回我的回复。有没有办法让我的wo_count变量在每次迭代时都正确，以便为图标分配正确的索引并为每个位置的信息窗口检索正确的地址数据？

Answer 1

在计数器周围创建一个闭包将允许您保留对它的持久引用。像这样的东西可能会起作用：

var form = document.getElementById('routeOptions');
var i;
var post_data = '';
var wo_count = 1;
var bounds = new google.maps.LatLngBounds();
var geocoder = new google.maps.Geocoder();
var addressMap = {};
for (i = 0; i < form.elements.length; i++) {
    if (form.elements[i].id.indexOf('maploc') == '0') {
        if (form.elements[i].id.indexOf('[start]') > 0
            || form.elements[i].id.indexOf('[end]') > 0) {
            continue;
        }
        geocodeWrapper(form.elements[i].value.split('::'), wo_count)
        wo_count++;
    }
}
function geocodeWrapper(values, wo_count) {
    var address = values[0] + ', ' + values[1] + ', ' + values[2] + ', wo_count:' + wo_count
    var latLng;
    geocoder.geocode({
        'address': address
    }, function(results, status) {
        if (status == 'OK') {
            var content = 'WO#:&nbsp;' + jq('#wo_number_'
                + wo_count).html() + '<br />'
                + $('#address_'+ wo_count).html()+'&nbsp;'
                + $('#city_'+ wo_count).html()+',&nbsp;'
                + $('#state_'+ wo_count).html()+'&nbsp;'
                + $('#zip_'+ wo_count).html()+'<br />'
                + $('#work_type_'+wo_count).html();
            //draw the marker
            var marker = new google.maps.Marker({
                position: results[0]['geometry']['location'],
                map: window.map,
                label: wo_count+"",
                details: content
            });
            google.maps.event.addListener(marker, 'mouseover', onMarkerMouseover);
            bounds.extend(marker.getPosition());
            map.fitBounds(bounds);
        } else {
            alert("Unable to find address. Contact Support if the problem persists");
            return;
        }
    });
}