javascript - 动态创建链接

Question

我正在制作基于谷歌地图的应用程序。现在用户输入一些位置。我想创建一个链接，其中包含用户输入的所有位置。用户有 10 个位置的限制。

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

这是 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 个包含位置的数组，那么构建 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,'+')替换字符串中的所有空格。+

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