Статические карты Google с указанием направлений

У меня есть в моем проекте список сгенерированных мест с мини-картами. На карте должно быть 2 точки и цветное направление движения между этими двумя точками.

он должен выглядеть примерно так:

ожидаемое изображение карты

Это должно быть статическое изображение, потому что на странице будет много таких изображений с разными направлениями. Но, как я вижу, карта Google Static не позволяет рисовать такое изображение. Между двумя точками может быть только прямая линия:

введите описание изображения здесь

Но мне нужно направление на нем...

Я решил использовать статическую карту, потому что в своем веб-приложении я получаю координаты этих двух точек, и ее легко указать в качестве переменных в моем PHP-шаблоне, если я использую статические карты. Но возможно ли получить направление как статическое изображение таким же образом?

Я нашел несколько решений с JavaScript API, но не нашел, как рисовать статическое изображение, как мне нужно...

ОТВЕТЫ

Ответ 1

Вы можете сделать это в два этапа.

  • Выполнение запроса запроса из кода PHP для получения закодированной полилинии
  • Использовать закодированную полилинию с шага 1 со статическими картами

например.

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

Это вернет закодированную полилинию в маршрутах [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

staticmap?center=Minsk&zoom=6&size=600x400&maptype=roadmap&path=enc%3AohqfIc_jpCkE%7DCx@mJdDa[bD%7BM%7D@e@_MgKiQuVOoFlF%7DVnCnBn@aDxCwNoD%7DHl@%7DNkByE%5Eqt@vFm|@dMkcBrQmv@lK%7Bu@~N_cBdWshEp_@%7DjGpHw_@rg@k_B|dB%7DmFvm@ulBdb@ulBxq@muCpoAggHxy@ygFbA_]aAawA%5CecAzGkx@nUuxA|D%7Bt@aBoeAwKwaAqG%7B%5CeBc_@p@aZx%60@gcGpNg|BGmWa%5CgpFyZolF%7BFgcDyPy|EoK_%7BAwm@%7BqFqZaiBoNsqCuNq%7BHk%60@crG%7B]qkBul@guC%7BJ%7D]aNo%7B@k%5EqfBkb@kfCsLc_@m|Ae~Cee@aaAcMqWsc@kjAwZsj@a%5E%7Dn@sSwk@u~@qhEkrBeiJsVkgAcGoNq_BetDkk@oqAqRcl@w%5CmmA%7BJs%5CoM%7DSga@on@qf@yu@wwAyxBkoAooBi%7B@utA%7Dp@eoAyl@ogAan@ei@uHyOiS_v@%7D%7DAeyFc%5CelAoJ_i@gBad@dA_a@f]i%60Evp@e_IrYmcDxJiyAjD%7BdBrCcnH|AqyEoIefBwJuw@eKoi@%7Bf@eeBoRagA%7BEsw@q@%7DgAnNcnCtIwoBdBitA_Cyo@me@%7DhEyMws@ie@qyAaaAspBqz@ceBaPq%5EeMcc@%7BI%7Bg@sGg%7B@%5CyqBlF%7BrEjAyzCuHa|@sKaf@oNg%60@y]_j@kc@wq@oSqr@oJys@kf@uxIOk%7B@tFuhAbEwl@pOklAvk@%7DgEjBo%5EwEgt@_l@scCoLio@iDyb@q@_z@%60N%7BkDNwr@wBsb@%7BHmn@yNibAsJyq@eOu_C%7DJocAqN_n@%7D[yu@c%5Eah@sgBqkCoOk%60@%7DMmm@mq@qzEumBmwK%7DUw~BmKktBuJobBsNwdAgZgzA_Nsf@%7B%7B@wwCcTqZqn@uq@kJ%7DOmG%7BT%7BMsx@cOaxCwH_g@ufCisFikBedEkLoh@q@eWdB%7B]bSeu@vxByyGbKqp@%60HchClG%7D%7BEcKejDgRkeHaGylAkHex@oWcjBaGmaAMevBtF%7DfAtMceA%60Se_AhUmaAb|AkyGjf@_uBvx@gaDl%7BBihIlY%7DjApGmk@%60XkiDbNaiBnA%7Bp@xAs~AfJk%7D@fH%7De@pJy%5EdZoj@|T%7B%60@~Rgu@tWahAdGkOxW%7BV%60_@qXjLgNbKoQzf@%7DhAfZeq@jWw%7B@lVodAnOgy@jh@mrItGc%60AtF_b@lBss@yZwgDsKyvC|CqkAvFqt@dg@qhDxLkv@vB_]_Aw%60@uMkrBcHuwAbFok@rM__AzEioAlCmoB_Dat@wK_dDoEigB|CcQbEqM~Bk%5ClEg_ApEg_AxAg%5CxJyZzNqc@gCyMuEoMsJ%7BYiBgF

Ответ 2

Я создал небольшую служебную функцию для моего веб-сайта, которая делает именно то, что вам нужно: https://github.com/bdupiol/php-google-static-map-directions

При наличии источника, адресата и массива путевых точек (если необходимо), он дает вам чистый URL-адрес Google Static Maps с движущимся путем, отображаемым между этими точками, и устанавливает соответствующие маркеры.

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.'"/>';

Статическая карта-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";
}

результат

staticmap?size=500x500&maptype=roadmap&path=enc:w%7BlsGtphDzBeOpOrH%7CY%7Ca%40zYbI%60ZpL%7CNvQt%40hQ%7BG%7CX%60CErA%7B%40%60%40xD%60%40hCdAzB%60K%60GnU%7Cd%40vEhb%40bGb%5BfMqG%7CZcTnmAcz%40%7Es%40og%40pxBexAfiBsoAhmD%7BfCjw%40%7De%40jIaPf%5Cew%40zEaR%60CqUhKyFlCPpAKzXlF%7CQbS%7CYtR%7EW%7BE%60pBym%40xsBgp%40rgA%7D%5CdVgBtIeF%60%5DmEpIoHnFC%7Eg%40fLhRdBxO_BxH%5E%7E_AzRdXwDfXjBz%5D%60M%5EqKnV%7D%7D%40xM%7BPfJi%40fEkBnP%7CEvVlKhi%40%7De%40hvDakFbpFyuHrMsMxa%40uY%60oCcmBR_AgEuCmHwOqAy%5BsFoOpGoQ%60IeZZyRqEusAsAuY%5EyJhZgMba%40%7DS%7EGkExi%40u%5ErOyIzKjCdP%60GnCCYaOrDwLdLuFxBp%40FlDXrImDbCgDm%40k%40sEbJchDrCmcAnH%7Dz%40bPidAjWg%7CBvBaY%7BCiUkWsd%40%7DF%7DWVmT%7ED%7BFj%5CoKdn%40kXrHWbHfE%7C%40sCuAoJy%40uV%7EMkwAh%40gb%40yNix%40yDo%60%40%7CCme%40vGcfA%7DEc%5Byd%40ouAgAwJwFhC%7D%40uBtAgCnDtHb%5BncAud%40oJ%60%40%7CUM%7CCL%7DCa%40%7DUqEEkA_%40y%40m%40sA%7DKoD_AmLoa%40uAaHjD%7BAdGc%40lJw%40bGb%40vB%7ECpEKl%40gCwHwS%7DFss%40b%40gXbNenAcBmXyKwl%40%7BIubBsRkzDgF%7BfBhAck%40vLso%40pGwu%40nBa%5DrZcs%40pXwv%40fDoTNkt%40dBgd%40%7EKgs%40Ugo%40wN%7Bm%40k%5B%7Bj%40yY%7BW_l%40qh%40eM%7DKcS%7DIe%5DaCc%5EmGwSwKic%40ZzG_%7C%40cEgb%40qB%7Dq%40nFci%40rLsf%40vSkb%40%60Rg%5CtIiZjReb%40Nc%40LUKYcDmRnG%7DZnCqIrG%7DOlDcU%7EJf%40fImHdT%7BAvBeIxFmLtCrDiC%7EDiA%60Cv%40%7DBzBcCaA%7DEgAgF%7EAiFrIkAzNh%40%60FiGvLbIhW%60EpMbEdS%5ChVRhb%40aBlKfDbOZhExLrL%60r%40l%40vGh%40vAvo%40hsD%7EQrc%40jZlYnXy%40%60FzvAtVd%5D%7CDfl%40vWn%7CAcGnb%40cGf%7E%40q%40%60g%40xH%7CD%7EOnGl%40dMnNbWtVhKpY%60UtGtBdE%7B%40tNIjNcDtIRlKhIdHbAxJxOhh%40bj%40%60L%7Ce%40tJhq%40f%5Dbo%40f_%40du%40jIdZfFlJG%7CIfDPnBQfHU%60GtApZgEhB%7EA%60Fxf%40dGll%40%7EF%7ELlJxHv%5E%7EXfG%7Ea%40VnP%60G%60QpMl%5CbZ%7Ce%40rqAvk%40rHh%5CbEnOs%40pJ%7CE%7EHrIlExCj%40lBpHDpKpBzRrAdAjK%7EUbHbS%7CFnHdH%7EW%7CAvEtJ%7EHrM%7CQjK%60ChFiHp%5DtWuCpe%40tAtNbEfCrOfB%60TvPNXBHF%40HO%7CKoG%7CS_Y%7C%60%40aa%40&markers=color:green%7Clabel:A%7C45.291002%2C-0.868131&markers=color:blue%7Clabel:B%7C44.8765065%2C-0.4444849&markers=color:blue%7Clabel:C%7C44.8843778%2C-0.1368667&markers=color:red%7Clabel:D%7C44.683159%2C-0.405704

Ответ 3

Я взял логику Bedu33 в PHP и написал ее в javascript, чтобы сгенерировать статическое изображение Google Maps на случай, если кому-то понадобится то же, что и мне. В этом коде используется ответ от 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);

Ответ 4

Я делал это сегодня, используя обзор_полинии, которая возвращается из матрицы расстояний, однако в некоторых случаях полилиния не отображается на статической карте при добавлении ее в URL-адрес карты, а та же, что и на динамической карте. В связи с появлением новых цен Google нам пришлось внести изменения, поскольку наша текущая годовая оплата должна увеличиться еще на 1500%. бонус статической карты в том, что вы можете передавать почтовый индекс/почтовый индекс и полные адреса. Вы также можете передавать переменные, которые делают вещи проще.