带有方向的谷歌静态地图 [英] Google static maps with directions

问题描述

我的项目列表中有带有迷你地图的生成地点.地图上应该有 2 个点，这两个点之间应该有彩色道路方向.

它应该看起来像这样:

这应该是静态图片，因为页面上会有很多这样不同方向的图片.但正如我所见，谷歌静态地图不允许绘制这样的图像.两点之间只能有直线，像这样:

但我需要指导...

我决定使用静态地图，因为在我的 Web 应用程序中，我收到了这两个点的坐标，如果我使用静态地图，很容易将它作为变量放在我的 PHP 模板中.但是是否有可能以同样的方式将方向作为静态图像接收?

我找到了几个使用 JavaScript API 的解决方案，但没有找到如何根据需要绘制静态图像...

解决方案

可以分两步完成.

1. 从 PHP 代码执行路线请求以获取编码的折线
2. 将步骤 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_MgKiQuVOoFlFlBn%DDVn7DDwEt%40%7DM%7DB_TjBy%7C%40lEgr%40lMa%60BhSi%7C%40%7COmuAxb%40k%7BGh%5E_%7BFjRor%40%7CaAq%7DC~iAomDle%40i%40%7Bdqd7DjHpm％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%40cs6%FuA%7D%60Fkm%40csBgCzx%40cs6%Fkw%FuA%7D%60Fkm%A7Dj％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％40毫安%40cl%40mUko%40sLwr%40mg%40awIoA_aApDe~%40dKytAfw%40kyFtCib%40%7DA%7Bj%40kd%40usBcRgx%40uFwb%40%7BCulAjJmbC~CumAuGwlA_%5Du_C_PqyB%7BI%7DiAwKik%7%40%4000%DuAwKik%7040%400%400%4000000000%40wjEimBuwKiYybC%7DLuyBoJ%7DhBuMieAwd%40i%7BB%7B~%40g%60D_Si%5Dsi%40%7Bk%40cPeSuH_T%7DNct%40kNcmC_Gyr%40mq%70%Cyr%40mq%0%CyB40mq%CyB40%Ak%CyB40%CyBc%7Dc%CyB40%CyB40%CyBc%40%CyB40%C7DByaHxNqt％40tGgxA％7CJ％7BkGeJ_aDsQi_HmFwuAmI％7BdA_XijByFgv％40％7DAiwBxDocAdM％7BlAtSmcAfUmaAptAmbGh〜AcvGbwBc％7DHff％40shB〜Isp中％40nQu％7DB％60UsuCbBok％40升％40％7DzAhIwbA〜OuaAnYwp％40rYwe％40％7CNke％40zc％40％7BhBrOwRdo％40sf％40xNaTb_％40uy％40ta％40K〜％40xTap％40hl％40uiCre％40unHlIi〜AlFsc％40rEkk％40aAce％40毫升％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%405%d%7Dd%405%dxCpz7Dd%405%dxCpz7Dd%405%DuQbz7T%40rFiImFqPiD%7BJ&key=YOUR_API_KEY

I have in my project list of generated places with mini maps. There should be 2 points on the map and colored road direction between this two points.

it should looks somehow like this:

This should be static image, because there will be many such pictures with different directions on the page. But as I see, Google Static map didn't allow to draw such image. There can be only direct line between two points, like this:

But I need direction on it...

I decided to use static map, because in my web application I receive coordinates of those 2 points, and it's easy to put it as variables in my PHP template if I use static maps. But is it possible to receive direction as static image in same way?

I have found few solution with JavaScript API, but didn't find how to draw static image as I need...

解决方案

You can do it in two steps.

1. Execute directions request from the PHP code to get the encoded polyline
2. Use encoded polyline from step 1 with static maps

E.g.

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

This will return encoded polyline in routes[0]->overview_polyline->points

Now use the polyline in static map:

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

这篇关于带有方向的谷歌静态地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！