1

私はGoogleマップに基づいてアプリを作っています。ここで、ユーザーはいくつかの場所を入力します。ユーザーが入力したすべての場所を含むリンクを作成したいと考えています。ユーザーには 10 か所の制限があります。

今、私は動的に作成して、その場所間の距離を Google に要求したいと考えています。ユーザーが入力した場所の数がわからない場合に動的にリンクを作成する方法。

Google のドキュメントの 2 つの場所への基本的なリンクは次のとおりです。

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 を使用してこのリンクを動的に作成する方法を教えてください。

ありがとうございます。それでは、お元気で。

4

2 に答える 2

1

js オブジェクトを受け取り、結果をコールバックに渡すリクエストを処理する Google マップ API の distanceMatrix クラスを使用する方が簡単な場合があります。

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

于 2013-01-17T16:40:49.080 に答える
0

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,'+')置き換えます。+

これらの配列には、必要な数の場所を追加できます。

于 2013-01-17T14:47:03.700 に答える