页面加载后，地理编码正在运行

Question

我正在尝试使用来自API的信息构建地图。不幸的是，数据集没有坐标。因此，我正在使用地址并对其进行地理编码来构建带有标记的谷歌地图，并获取距离以及当前位置的方向。我获取用户的当前位置，并找到他们周围 10 英里半径的请求信息。

这是我的地理编码功能

<script>
var geocoder = new google.maps.Geocoder();
function geocodeAddress(geocoder, street, city, zip) {
var address = street + ', ' + city + ', ' + zip;
geocoder.geocode({'address': address}, function(results, status) {
if (status === 'OK') {
console.log(results[0].geometry.location.lat(), results[0].geometry.location.lng());
debugger;
return(results[0].geometry.location.lat(), results[0].geometry.location.lng());
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
</script>

下面是扫描来自 API 调用的所有数据的循环

$my_counter = 0;
foreach ($param as &$value){
$row = $value;
echo" 
<script>
//the return information is messy so i use this to clean it up
var coordinates = geocodeAddress(geocoder, '".trim(str_replace(',', '',$row->address))."', '".trim($row->city)."', '".trim($row->zip)."');
console.log(coordinates);
var new_lat = parseFloat(coordinates[0]);
var new_long = parseFloat(coordinates[1]);
var distance_to_the_point = haversineGreatCircleDistance (".$original_gps_lat.", ".$original_gps_long.", new_lat, new_long);
if (distance_to_the_point <= ".$radius."){
var data = '".$row->phone."';
var result = data;
var rounded_distance = distance_to_the_point.toFixed(2);
var name = '".trim($row->provider_name)."';
document.getElementById('name').innerHTML = name.toString();
}
";
</script>

现在，当我在整个过程中使用断点和日志运行它时，我看到地理编码函数正在运行，但从未返回。然后，一旦页面加载完毕，地理编码器就会完成，我会看到返回的坐标。我不明白为什么它不同步运行。

Answer 1

因为要geocoder.geocode()的第二个参数是一个异步回调function。 这是 Javascript 中非常常见的模式，因此您需要接受它，并且在加载页面之前不要开始尝试调用 geocode，例如使用 jquery 的 ready((。

这里有一些关于回调的好读物：YDKJS