动态创建链路

Question

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

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

下面是Google文档中两个位置的基本链接:

http://maps.googleapis.com/maps/api/distancematrix/json?origins=Vancouver公元前+ | Seattle&目的地=圣+旧金山维多利亚| + BC&模式= bicycling&语言= fr-FR&传感器= false

给了

:

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

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

谢谢问候。

Answer 1

你可能会发现使用来自google maps api的distancemmatrix类更容易，它接受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,'+')将字符串中的所有空格替换为加号(+)。