Google Maps API - 给出“概览”折线的方向毫无意义

Gie*_*ius 0 google-maps google-maps-api-3

我正在使用方向 apix使用Google Maps API. 我的电话是这样的:

https://maps.googleapis.com/maps/api/directions/json?key=MY_KEY&origin=Exeter%2C+UK&destination=London&region=uk&waypoints=optimize:true|52.80443%2C1.3974969999999303|51.33700547604255%2C-2.5970759440972415|50.430475%2C-4.305309999999963

它返回的结果似乎没问题(所有驾驶说明)。但是,它还会返回一个概览折线,我想在我的网站上显示该折线。但是每当我对其进行解码时(无论是在我的网站上还是使用他们的Polyline Utility),它都会显示一些奇怪的线条,这些线条似乎不太符合路线(它有正确的起点,但没有显示路线,在有些点它在直线上移动得很远)。例如:

错误的折线

这是我为上述请求获得的路线的折线。正如你所看到的,它有很多线在水面上航行......

在我的网站中,我像这样显示多边形(但在他们的折线工具中,我得到了相同的行):

var decodedPath = google.maps.geometry.encoding.decodePath("<?=$response->routes[0]->overview_polyline->points?>");
var poly = new google.maps.Polyline({
                  path: decodedPath,
                  strokeColor: '#FF0000',
                  strokeOpacity: 1.0,
                  strokeWeight: 3,
                  map: map
           });
Run Code Online (Sandbox Code Playgroud)

我究竟做错了什么?如何获得正确的折线以显示实际路线的轮廓?

谢谢!

geo*_*zip 5

对于您的请求,我从服务中得到的响应是:

"overview_polyline" : {
  "points" :
  "e}ptHdgqTlsAbZv_ApHxuAclChkBncCxhBnk@n_AzrBnmDvoFh~CruD`uMpnXltBlc@bmA~{AdhHhlCzpErzKp}@jjN|a@rsLnPjcGqoApjCww@|kGkoAlcIkU|uLaaAlsEe]b{Bpe@waBy\\awD|u@ekCvu@svJbbD_tQfc@krL{k@usMqMsrG{vAwfF}aGokJwgDkv@ibCq`CkmByz@amC_gFytDevJ_xD{yG{qEkkEg}B_`EkcCwdAymAqcCk`BmqGebJ_pBogCvOajDkwBqtGkyHcgMkrE_zIabc@ar@}wIalDs_H{zKykJgrGkdFqhCoKsaFf^ceJwyDukBypAyiB_sGgjCmjJw_DklB_fBqhDtVunHbpA_aK|p@kdEixBomFqjA_l@kHcjCwhAygGfQcnFirBsvBaaBk_F}SuxDks@w|A{tDjXcaH{bF_mDm|Aox@ufIcv@gmFbu@gtLm[aiS{lEerYuiAqbGx{@{mGprBkaSplBkhXnqG_yTjsBmxGtNuyIcYayRq}@utO`T}hThxAw_InjC}sGncA}`Kau@}iF{rAqlNsmKetVupAicNrqAmpKhcAiuBsb@yoDgS{{FwuAbNgzDCgdAldCc{ClnAkzEct@wkHcoEk{AigDywBu}BsvBi`CePieEt[oiRia@}rC`tA{dDpaBa~GzM}xXlc@esPshA_cL|x@_wD_iAurBgsImM{eLohGcxC{|@caD{F}dEgoCu|D}d@szI~wCmuMbz@kaBeJkjC_vA}yH_wDseE{uJwxHyzDkzEapIc\\g_JejIyaMgeJmu[_wBc}Huu@ydBkgBob@_`AcbJmhEyrZ}cC{tFe|EkaI_hDclP_iCqfE{eAwxEe{Aa}JjiAidE{yCqlKkaBaaLmaCsaA{fAg|AoeBtx@cNxHaeCzu@{{A{kAg_@ucAmxEefDo{AsSajAr}AqxCjyFhbCgbFnuAgoBnsAvNncF~xC|f@loA`pCheDlyAhmBxx@{Jvs@}`Abo@hx@ba@pKxzAko@zuAf~ElgDphK{QpyEak@xzC~eB|{GnfApdFfcCfvDnqDzjQhgEr}Gj~C~dHf{Dh|XddAj|J`zBrp@`h@dxErwDvpJflEplQ~uCtgFxgDbuDfyAxrI`sC`zIdhGfxHpkD|{AxhClrG|oGznEpxHprCliG}u@nvFop@hgDo`A~~H}XteEfuCzeH|cA`zKtrF|bCtn@zwEsOr|HxxGjrFtiHlyBhv@xgEg}CxnCmf@hvAzlAlkAzfNgFtnIvIhsI"
Run Code Online (Sandbox Code Playgroud)

那里有两个转义的反斜杠(“\”),它们需要“未转义”:

概念证明小提琴

生成的静态地图的屏幕截图

活生生的例子