Google Maps API，Javascript，返回距离 Geocoder 用作 Circle 的半径

Question

我正在尝试使用距城市/地铁边界的最短距离作为要在该特定城市的 Google 地图上绘制的圆圈的大小。但是，该值仍未定义，尽管我相信我考虑了与 AJAX 相关的请求响应问题。 我在这里做错了什么。

function initialize() {
    autoComplete();

    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

    for (var i=0;i<5;i++) {            

        var centerLocation = new google.maps.LatLng(myLat[i],myLng[i]);
        var address = myMetro[i] + "," + myCountry[i];
        var testRadius = 500000;

        Geocode(address, function(distance) {
            myRadius = distance;   
            console.log("it works here " + myRadius);         
        });

        console.log("it is undefined here " + myRadius);

        circleMetroBounds = new google.maps.Circle({
            strokeColor: 'rgb(255,255,255)', //sets the color for the border of the circle
            strokeOpacity: 0.8, //sets the opacity for the border
            strokeWeight: 2, //sets the border size in pixels
            fillColor: 'rgb(166,116,178)', //sets the fill color for the circle (should become a variable, like center)
            fillOpacity: 0.4, //sets the opacity for the fill color
            center: centerLocation, //sets the coordinates for the location of the circle
            map: map,
            radius: myRadius
        });
    }       
}

function Geocode(address, cb){
    geocoder = new google.maps.Geocoder();
    geocoder.geocode({ 'address': address }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var boundMetroNE = results[0].geometry.bounds.getNorthEast(); // NE bound for Metro
            var boundMetroSE = new google.maps.LatLng(results[0].geometry.bounds.getSouthWest().lat(), results[0].geometry.bounds.getNorthEast().lng()); // SE
            var boundMetroNW = new google.maps.LatLng(results[0].geometry.bounds.getNorthEast().lat(), results[0].geometry.bounds.getSouthWest().lng()); // NW
            var boundMetroSW = results[0].geometry.bounds.getSouthWest(); // SW bound for Metro

            var distanceMetroNS = google.maps.geometry.spherical.computeDistanceBetween(boundMetroNE,boundMetroSE);
            var distanceMetroEW = google.maps.geometry.spherical.computeDistanceBetween(boundMetroNE,boundMetroNW);

            if (distanceMetroNS<distanceMetroEW) {
                distanceMetroBounds = distanceMetroNS;
            } else {
                distanceMetroBounds = distanceMetroEW;
            }
        } else {
            console.log("Geocoding failed: " + status);
        }
        console.log("distance Shortest: " + distanceMetroBounds + " meters");
        cb(distanceMetroBounds);
    });
}

还找到包含 Javascript 控制台的输出

this goes wrong it undefined (index):84
this goes wrong it undefined (index):84
this goes wrong it undefined (index):84
this goes wrong it undefined (index):84
this goes wrong it undefined (index):84
distance Shortest: 89152.91926541901 meters (index):119
this goes wrong it 89152.91926541901 (index):81
distance Shortest: 62673.31119262365 meters (index):119
this goes wrong it 62673.31119262365 (index):81
distance Shortest: 78080.76940877317 meters (index):119
this goes wrong it 78080.76940877317 (index):81
distance Shortest: 12077.897792227775 meters (index):119
this goes wrong it 12077.897792227775 (index):81
distance Shortest: 13643.316791625093 meters (index):119
this goes wrong it 13643.316791625093

编辑：

完成这项工作的最终代码 :)

function initialize() {
    autoComplete();

    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

    for (var i=0;i<5;i++) {        
        var address = myMetro[i] + "," + myCountry[i];    
        var centerLocation = new google.maps.LatLng(myLat[i],myLng[i]);

        Geocode(address, centerLocation, function(callbackDistance, callbackCenterlocation) {
            circleMetroBounds = new google.maps.Circle({
                strokeColor: 'rgb(255,255,255)', //sets the color for the border of the circle
                strokeOpacity: 0.8, //sets the opacity for the border
                strokeWeight: 2, //sets the border size in pixels
                fillColor: 'rgb(166,116,178)', //sets the fill color for the circle (should become a variable, like center)
                fillOpacity: 0.4, //sets the opacity for the fill color
                center: callbackCenterlocation, //sets the coordinates for the location of the circle
                map: map,
                radius: callbackDistance
            });         
        });   
    }       
}

function Geocode(address, centerlocation, cb){
    geocoder = new google.maps.Geocoder();
    geocoder.geocode({ 'address': address }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var boundMetroNE = results[0].geometry.bounds.getNorthEast(); // NE bound for Metro
            var boundMetroSE = new google.maps.LatLng(results[0].geometry.bounds.getSouthWest().lat(), results[0].geometry.bounds.getNorthEast().lng()); // SE
            var boundMetroNW = new google.maps.LatLng(results[0].geometry.bounds.getNorthEast().lat(), results[0].geometry.bounds.getSouthWest().lng()); // NW
            var boundMetroSW = results[0].geometry.bounds.getSouthWest(); // SW bound for Metro

            var distanceMetroNS = google.maps.geometry.spherical.computeDistanceBetween(boundMetroNE,boundMetroSE);
            var distanceMetroEW = google.maps.geometry.spherical.computeDistanceBetween(boundMetroNE,boundMetroNW);

            if (distanceMetroNS<distanceMetroEW) {
                distanceMetroBounds = distanceMetroNS;
            } else {
                distanceMetroBounds = distanceMetroEW;
            }
            // else if solves QUERY LIMIT
            } else if (status === google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {    
                    setTimeout(function() {
                        Geocode(address, centerlocation, cb);
                    }, 200);
            } else {
            console.log("Geocoding failed: " + status);
        }
        console.log("distance Shortest: " + distanceMetroBounds + " meters");
        cb(distanceMetroBounds, centerlocation);
    });
}

Answer 1

地理编码是异步的。当回调函数可用时，您必须使用返回值。

请注意，地理编码受到速率限制和配额的限制，如果您尝试对循环中的太多点进行地理编码，则会因 OVER_QUERY_LIMIT 失败。

function initialize() {
    autoComplete();

    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

    for (var i=0;i<5;i++) {            

        var centerLocation = new google.maps.LatLng(myLat[i],myLng[i]);
        var address = myMetro[i] + "," + myCountry[i];
        var testRadius = 500000;

        Geocode(address, function(distance) {
            myRadius = distance;   
            console.log("it works here " + myRadius);         
            circleMetroBounds = new google.maps.Circle({
              strokeColor: 'rgb(255,255,255)', //sets the color for the border of the circle
              strokeOpacity: 0.8, //sets the opacity for the border
              strokeWeight: 2, //sets the border size in pixels
              fillColor: 'rgb(166,116,178)', //sets the fill color for the circle (should become a variable, like center)
              fillOpacity: 0.4, //sets the opacity for the fill color
              center: centerLocation, //sets the coordinates for the location of the circle
              map: map,
              radius: myRadius
            });
        });

        console.log("it is undefined here " + myRadius);

    }       
}

function Geocode(address, cb){
    geocoder = new google.maps.Geocoder();
    geocoder.geocode({ 'address': address }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            var boundMetroNE = results[0].geometry.bounds.getNorthEast(); // NE bound for Metro
            var boundMetroSE = new google.maps.LatLng(results[0].geometry.bounds.getSouthWest().lat(), results[0].geometry.bounds.getNorthEast().lng()); // SE
            var boundMetroNW = new google.maps.LatLng(results[0].geometry.bounds.getNorthEast().lat(), results[0].geometry.bounds.getSouthWest().lng()); // NW
            var boundMetroSW = results[0].geometry.bounds.getSouthWest(); // SW bound for Metro

            var distanceMetroNS = google.maps.geometry.spherical.computeDistanceBetween(boundMetroNE,boundMetroSE);
            var distanceMetroEW = google.maps.geometry.spherical.computeDistanceBetween(boundMetroNE,boundMetroNW);

            if (distanceMetroNS<distanceMetroEW) {
                distanceMetroBounds = distanceMetroNS;
            } else {
                distanceMetroBounds = distanceMetroEW;
            }
        } else {
            console.log("Geocoding failed: " + status);
        }
        console.log("distance Shortest: " + distanceMetroBounds + " meters");
        cb(distanceMetroBounds);
    });
}