动态创建链接

Question

我正在制作一个基于谷歌地图的应用程序。现在用户输入一些位置。我想创建一个链接，其中有用户输入的所有位置。用户有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的distanceMatrix类更容易，它接受js对象并处理请求，将结果传递给回调。

google示例的修改版本：

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

现在，如果你有两个带位置的数组，url很容易构建：

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,'+')用加号(+)替换字符串中的所有空格。

您可以向这些阵列添加任意数量的位置。