Question

我正在制作基于Google地图的应用。现在用户进入一些位置。我想创建一个包含用户输入的所有位置的链接。用户有10个位置的限制。

现在我想动态创建一个请求Google在这些位置之间的距离。当我不知道用户输入了多少个位置时，如何以动态方式创建链接。

这是Google文档中两个位置的基本链接：

http://maps.googleapis.com/maps/api/distancematrix/json?origins=Vancouver+BC|Seattle&destinations=San+Francisco|Victoria+BC&mode=bicycling&language=fr-FR&sensor=false

给出：

温哥华至旧金山温哥华至维多利亚西雅图到旧金山西雅图到维多利亚

现在，如果我有很多输入，如何使用javascript动态创建此链接？

感谢问候。

Answer 1

您可能会发现使用google maps api中的distanceMatrix类更容易，它采用js对象并处理将结果传递给回调的请求。

谷歌示例的修改版本：

var origins = ["Vancouver BC", "Seattle"];
var destinations = ["San Francisco", "Victoria BC"];
var service = new google.maps.DistanceMatrixService();
service.getDistanceMatrix(
{
    origins: [origins],
    destinations: [destinations],
    travelMode: google.maps.TravelMode.BICYCLING,
}, callback);

function callback(response, status) {
// Response contains the same object as the one from the link
}

https://developers.google.com/maps/documentation/javascript/distancematrix

Answer 2

url参数似乎包含以下元素：

// Url,
# http://maps.googleapis.com/maps/api/distancematrix/json?

// Origin locations:
# origins=Vancouver+BC|Seattle
// Destinations:
# &destinations=San+Francisco|Victoria+BC
// (And some additional options:)
# &mode=bicycling
# &language=fr-FR
# &sensor=false

现在，如果您有2个带位置的数组，那么构建网址非常简单：

var origins = ["Vancouver BC", "Seattle"];
var destinations = ["San Francisco", "Victoria BC"];

var url = "http://maps.googleapis.com/maps/api/distancematrix/json?"+
    "origins=" +
    origins.join('|').replace(/ /g,'+') +
    "&destinations=" +
    destinations.join('|').replace(/ /g,'+') +
    "&mode=bicycling&language=fr-FR&sensor=false";

.join('|')将数组元素与管道（|）字符连接在一起，因此origins.join('|')会返回"Vancouver BC|Seattle"。
然后，.replace(/ /g,'+')用加号（+）符号替换字符串中的所有空格。

您可以根据需要为这些阵列添加任意数量的位置。

动态创建链接

2 个答案: