如何使用 Google 地图 API 一键获取从某个位置到各个位置的距离？答案

【问题标题】：How to get distance from a location to various locations by one click using Google maps API?如何使用 Google 地图 API 一键获取从某个位置到各个位置的距离？
【发布时间】：2012-12-06 08:27:09
【问题描述】：

目前程序正在运行，但界面很烦人，因为我在getData() 函数中使用了alert() 函数！当我从getData() 函数中删除这一行时，整个程序出错了！！我不知道是什么问题？有没有人有更好的主意来做这样的过程？

我在这里尝试做的程序旨在帮助用户找到距离他们当前地址50公里内的餐厅，我已经收集了各种位置地址并记录在数据库中。

initialize() 函数在加载 HTML 正文时调用，在 HTML 正文的第一行中，餐厅数据将使用 PHP 从 MySQL 中提取，PHP 会将数据打印到 JavaScript 数组 jsres_add、jsres_id、jsres_name 和 jsnu 中，这样我就可以在 JavaScript 代码中使用它们。 *请注意下面的JavaScript代码是分开在.js文件中的

var geocoder, location1, location2, gDir, oMap, jsnu, arraynu, address2;
jsres_add = new Array();
jsres_id = new Array();
jsres_name = new Array();

function initialize() {
    geocoder = new GClientGeocoder();
    gDir = new GDirections();
    GEvent.addListener(gDir, "load", function() {
        var drivingDistanceMiles = gDir.getDistance().meters / 1609.344;
        var drivingDistanceKilometers = gDir.getDistance().meters / 1000;
        if (drivingDistanceKilometers < 50){
            // function to save search result within 50km into database using ajax
            saveSearchResult(jsres_id[arraynu],jsres_name[arraynu],drivingDistanceKilometers);
        }
    });
}

function getData() {
    emptytable(); //function to empty search result table using ajax
    //jsnu is the number of the restaurants data found in database
    for (var ii = 0; ii < jsnu; ii++) {
        arraynu = ii;
        address2 = jsres_add[ii];
        showLocation();
        alert("done!");
    }
    showResults(); //function to print out the search result from database into html body using ajax
}

function showLocation() {
geocoder.getLocations(document.forms[0].address1.value, function (response) {
    if (!response || response.Status.code != 200){
        alert("Sorry, we were unable to geocode your address");
    }else{
        location1 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
        geocoder.getLocations(address2, function (response) {
            if (!response || response.Status.code != 200){
                alert("Sorry, we were unable to geocode the second address");
            }else{
                location2 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
                gDir.load('from: ' + location1.address + ' to: ' + location2.address);
            }
        });
    }
});
}

【问题讨论】：

标签： javascript ajax distance google-maps-api-2

【解决方案1】：

如果alert() 函数的存在使代码工作，我猜这是与时间有关的问题，特别是在收到地理编码器服务的响应之前，您的address2 似乎被覆盖了。

[编辑]

在你设置好 jsfiddle 之后，我更仔细地检查了你的代码并让它工作：

http://jsfiddle.net/zuYXS/16/

address2 确实被覆盖了，但这不是唯一的问题，事实上你使用的所有变量都是全局的。特别是，我必须为您提出的每个请求创建一个 GDirections 实例（共享一个会在显示之前覆盖第一个结果）。

要了解为什么您的代码无法正常工作，我建议您搜索并研究一些有关异步方法调用的资料。

同样作为一般经验法则（对于 Javascript 和一般编程）尽量避免将变量放在全局范围内，但将它们的生命限制在尽可能小的范围内，这将在很多方面有所帮助：它会减少变量名称冲突的可能性，同时提高性能（变量仅在必要时存在）和代码的可读性（更容易跟踪值）。

【讨论】：

不幸的是，它没有用！但正如你所说，这是一个时间问题，我不知道是否可以使用某种事件处理程序 addlistener？
如果您可以设置jsfiddle.net，我们会更容易为您提供帮助。可以吗？
我已尽可能简单地缩短程序；所以每个人都可以很容易地看到问题，我已经在我的笔记本电脑上测试了这个程序，然后在jsfiddle.net 上分享它并且它正在工作，这里是jsfiddle.net/ibrahim_zahrani/zuYXS/6
好的，让它工作：jsfiddle.net/zuYXS/16 我正在更新我的答案来解释我必须改变什么。
非常感谢安德里亚，我几乎花了 2 周的时间试图解决这个问题，但不幸的是所有尝试都失败了，再次感谢你 :)

【解决方案2】：

路线服务是异步的，你不能从中返回任何东西，你需要在回调例程中使用从服务器返回的数据。

您使用的是 Google Maps API v2 语法；该 API 已弃用，并且在 2013 年 5 月 19 日之后将不再受支持。强烈建议不要使用该 API 版本进行新开发。

重新编写代码以使用the Google Maps API v3

【讨论】：