web-dev-qa-db-ja.com

ルート案内付きのGoogle静的マップ

私のプロジェクトリストには、生成された場所のミニマップがあります。マップ上に2つのポイントがあり、この2つのポイントの間に色の付いた道路の方向があるはずです。

次のようになります。

expected map picture

これは静的な画像である必要があります。これは、ページ上にさまざまな方向の写真が多数あるためです。しかし、私が見るように、Google Static mapはそのような画像を描くことを許可しませんでした。次のように、2点間には直線のみが存在します。

enter image description here

しかし、私はそれに指示が必要です...

私のWebアプリケーションではこれらの2点の座標を受け取るため、静的マップを使用することにしました。静的マップを使用する場合は、PHPテンプレートに変数として配置するのは簡単です。同じ方法で方向を静止画像として受け取ることは可能ですか？

JavaScript APIを使用した解決策はほとんど見つかりませんでしたが、必要に応じて静的画像を描画する方法が見つかりませんでした...

google-mapsgoogle-maps-api-3google-static-maps
18
Sergey Fedirko

2つの手順で実行できます。

  1. PHPコードからルートリクエストを実行して、エンコードされたポリラインを取得します
  2. 静的マップで手順1のエンコードされたポリラインを使用する

例えば。

https://maps.googleapis.com/maps/api/directions/json?origin=Grodno&destination=Minsk&mode=driving&key=YOUR_API_KEY

これは、routes [0]-> overview_polyline-> pointsでエンコードされたポリラインを返します

次に、静的マップでポリラインを使用します。

https://maps.googleapis.com/maps/api/staticmap?size=600x400&path=enc%3AohqfIc_jpCkE%7DCx%40mJdDa%5BbD%7BM%7D%40e%40_MgKiQuVOoFlF%7DVnCnBn%40aDlDkN%7DDwEt%40%7DM%7DB_TjBy%7C%40lEgr%40lMa%60BhSi%7C%40%7COmuAxb%40k%7BGh%5E_%7BFjRor%40%7CaAq%7DC~iAomDle%40i%7BA~d%40ktBbp%40%7DqCvoA%7DjHpm%40uuDzH%7Dm%40sAg%7DB%60Bgy%40%7CHkv%40tTsxAtCgl%40aBoeAwKwaAqG%7B%5CeBc_%40p%40aZx%60%40gcGpNg%7CBGmWa%5CgpFyZolF%7BFgcDyPy%7CEoK_%7BAwm%40%7BqFqZaiBoNsqCuNq%7BHk%60%40crG%7B%5DqkBul%40guC%7BJ%7D%5DaNo%7B%40waA%7DmFsLc_%40_V%7Dh%40icAopBcd%40i_A_w%40mlBwbAiiBmv%40ajDozBibKsZ%7DvAkLm%5DysAk%7DCyr%40i%60BqUkp%40mj%40uoBex%40koAk_E_hG%7B%60Ac%7DAwp%40soAyk%40ogAml%40%7Bg%40qKsNeJw%5DeuA%7D%60Fkm%40czBmK%7Bg%40wCed%40b%40_e%40dT%7BgCzx%40csJrc%40ejFtGi%60CnB_pFhCa%60Gw%40%7Du%40wFwaAmP%7BoA%7Dj%40etBsRm_AiGos%40aCyy%40Lic%40tFohA~NeoCvC_%7CAWm~%40gb%40w~DuLex%40mUk_Ae_%40o_Aol%40qmAgv%40_%7DAaf%40qhAkMcl%40mHwn%40iCuq%40Nqi%40pF%7D%7CE~CyiDmFkgAoUedAcb%40ku%40ma%40cl%40mUko%40sLwr%40mg%40awIoA_aApDe~%40dKytAfw%40kyFtCib%40%7DA%7Bj%40kd%40usBcRgx%40uFwb%40%7BCulAjJmbC~CumAuGwlA_%5Du_C_PqyB%7BI%7DiAwKik%40%7DUcr%40ya%40up%40%7DkB%7DoCoQ%7Da%40aMyf%40an%40wjEimBuwKiYybC%7DLuyBoJ%7DhBuMieAwd%40i%7BB%7B~%40g%60D_Si%5Dsi%40%7Bk%40cPeSuH_T%7DNct%40kNcmC_Gyr%40mq%40_~AkmA%7DkCksByrE_N%7Bc%40oAcs%40%60J%7Bi%40t%7DByaHxNqt%40tGgxA%7CJ%7BkGeJ_aDsQi_HmFwuAmI%7BdA_XijByFgv%40%7DAiwBxDocAdM%7BlAtSmcAfUmaAptAmbGh~AcvGbwBc%7DHff%40shB~Isp%40nQu%7DB%60UsuCbBok%40l%40%7DzAhIwbA~OuaAnYwp%40rYwe%40%7CNke%40zc%40%7BhBrOwRdo%40sf%40xNaTb_%40uy%40ta%40k~%40xTap%40hl%40uiCre%40unHlIi~AlFsc%40rEkk%40aAce%40mL%7DlAwPcyB_GohBzDsqAtMqtA~h%40weDtFkd%40Bi%60%40_XwfEdAag%40dEkM%60%40zAqApJef%40%7BP_o%40sYys%40ai%40yf%40_j%40y_%40oi%40mVi%5EmFqSwAiPtDuQbc%40_nAtZyaAlEkc%40r%40eq%40%7CAo%5BrTwcAtVuz%40vQ%7Dd%40%7CPmb%40xT%7B%5CzZyd%40jG%7BRzL%7Dh%40jr%40ov%40rFiImFqPiD%7BJ&key=YOUR_API_KEY

28
xomena

私はあなたのウェブサイトのためにあなたが必要とするものを正確に実行する小さなユーティリティ関数を作成しました： https://github.com/bdupiol/php-google-static-map-directions

出発地、目的地、およびウェイポイントの配列（必要な場合）を指定すると、それらのポイント間にレンダリングされた駆動パスを持つクリーンなGoogle Static Maps URLを提供し、適切なマーカーを設定します。

index.php

<?php

include "static-map-direction.php";

$Origin = "45.291002,-0.868131";
$destination = "44.683159,-0.405704";
$waypoints = array(
    "44.8765065,-0.4444849",
    "44.8843778,-0.1368667"
  );

$map_url = getStaticGmapURLForDirection($Origin, $destination, $waypoints);

echo '<img src="'.$map_url.'"/>';

static-map-direction.php

<?php

function getStaticGmapURLForDirection($Origin, $destination, $waypoints, $size = "500x500") {
    $markers = array();
    $waypoints_labels = array("A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K");
    $waypoints_label_iter = 0;

    $markers[] = "markers=color:green" . urlencode("|") . "label:" . urlencode($waypoints_labels[$waypoints_label_iter++] . '|' . $Origin);
    foreach ($waypoints as $waypoint) {
        $markers[] = "markers=color:blue" . urlencode("|") . "label:" . urlencode($waypoints_labels[$waypoints_label_iter++] . '|' . $waypoint);
    }
    $markers[] = "markers=color:red" . urlencode("|") . "label:" . urlencode($waypoints_labels[$waypoints_label_iter] . '|' . $destination);

    $url = "https://maps.googleapis.com/maps/api/directions/json?origin=$Origin&destination=$destination&waypoints=" . implode($waypoints, '|');
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_POST, false);
    $result = curl_exec($ch);
    curl_close($ch);
    $googleDirection = json_decode($result, true);

    $polyline = urlencode($googleDirection['routes'][0]['overview_polyline']['points']);
    $markers = implode($markers, '&');

    return "https://maps.googleapis.com/maps/api/staticmap?size=$size&maptype=roadmap&path=enc:$polyline&$markers";
}

結果

12
Bedu33

Bedu33のロジックをPHPで取得し、誰かが必要に応じてGoogle Maps Static Imageを生成するためにJavaScriptで記述します。このコードは Directions API

var request = directionsDisplay.directions.request;
var start = request.Origin.lat() + ',' + request.Origin.lng();
var end = request.destination.lat() + ',' + request.destination.lng();
var path = directionsDisplay.directions.routes[0].overview_polyline;
var markers = [];           
var waypoints_labels = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K"];
var waypoints_label_iter = 0;   
markers.Push("markers=color:green|label:" + waypoints_labels[waypoints_label_iter] + '|' + start);

for(var i=0;i<request.waypoints.length;i++){
    //I have waypoints that are not stopovers I dont want to display them
    if(request.waypoints[i].stopover==true){
        markers.Push("markers=color:blue|label:" + waypoints_labels[++waypoints_label_iter] + '|' + request.waypoints[i].location.lat() + "," +request.waypoints[i].location.lng());
    }           
}

markers.Push("markers=color:red|label:" + waypoints_labels[++waypoints_label_iter] + '|' + end);

markers = markers.join('&');

alert("https://maps.googleapis.com/maps/api/staticmap?size=1000x1000&maptype=roadmap&path=enc:" + path + "&" + markers);
8
Natalia Traficante

距離行列から返されるoverview_polylineを使用して今日これを行っていますが、場合によっては、ポリラインをマップURLに追加するときに静的マップにプロットされず、ダイナミックマップで同じポリラインが機能する場合があります。 Googleの新しい価格設定では、現在の年間支払いが他の1500％増加するため、変更する必要がありました。静的マップの利点は、郵便番号/郵便番号と完全な住所を渡すことができることです。変数を渡すこともできます。

1
Nick Coleby