[英]Google Maps API, Javascript, return distance Geocoder use as radius for Circle
我正在嘗試使用距城市/地鐵范圍最短的距離作為要在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);
});
}
地理編碼是異步的。 如果可用,則必須在回調函數中使用返回值。
請注意,地理編碼受速率限制和配額的限制,如果您嘗試對循環中的太多點進行地理編碼,它將失敗並顯示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);
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.