Vue.js项目中如何解码并展示Google Routes API的编码折线？

架构老林

2026-7-2

如何在Vue.js项目中解码并展示Google Routes API返回的编码折线

问题背景

我正在使用Google Routes API的computeRoute POST接口，它返回的JSON数据包含编码后的折线（encodedPolyline），我需要在Vue.js项目的地图组件中解码并展示这条折线，但找不到可行的实现方案。

API返回的JSON数据

{"routes": [{"distanceMeters": 99537,"duration": "6977s","polyline": {"encodedPolyline": "y`hbEqrfzEw@HYJUTS\\Qf@Kl@EHETQVQJe@FQJyDJuBNc@?{@JwAf@qAb@m@NkBZs@D_A@cBGm@Io@OqBw@i@UkMqEcD}@oB]kBMeDGaBDkEf@cJdBsC|@q@^qAfAaApAe@bAk@vAu@hCuCbPgF`XwB|L_CvLgFvZ[tAQfBkBpK{AtE}AtC}B~BmDzBoDrBs@d@{FdDsErCo@TuAT}A@sCOmLkC{DcAoCo@{E{@yD_@cBIuCAa@BSDsAJyB\\qA\\{CzAmAr@mAbAgBpBwA|Bc@x@y@tByAfF}B~IuAtGe@|CuA|FkAnF{BrJ{AlH}@rFwDbVm@~B_A`C_AjBkAjB_AfA_Ax@y@b@oAj@_ARgAJu@BYDoA@sJW}CDyGVoJn@qD\\_H~@}CRwCDqEGeB@wDPiF^_E\\_GZeABuAAqCSoB]sBi@qAg@i@WeCaB}AwAsLyLwKgL_FgEe@e@e@w@gBeBaBmAyAs@_AY}@QgBWwAEqAAaKTy@?cAGoC]wBk@}@_@kAu@}BaBcA{@m@s@m@{@_A_BaA{B{@aCwB_HaBuF{CmJ{EgPm@mBg@wAo@{AqAcCmBqCc@i@wBoBwCwBwJeGqPcJwBw@yA[iAK_AA}@BoANcB`@eBr@qAt@{@r@sEdFo@v@gAlBo@`Bc@|A[bBmAhK[tAs@|AgAvAe@`@q@d@{@`@mAb@}QvCiCXsHlAmEl@}Cn@eGdA{C^uCl@wAh@]PiAbASV{@pAc@dAo@dCM|@KfB?fADfAHv@b@fDTfCAlCM|A]|Ai@tA{@rA[`@yBxBkAdAu@t@aClCsAfBu@nAi@|AOj@Q`AMfAEbAApADvBR`Bb@|AZbAjN~YjBdEnErJ|@pBbEtIdOv[~CdH`ArBr@jCNjA@tAEl@UrA[x@O\\w@bAy@h@a@Ny@NqA@qCUcSkHcB_@wB_@iBSyBQwISsCKyAS{Ag@qDcBeA]q@OuAOcQDcHCmAFwAXwAZyDhAmAXsARyYbDqAH_D@wAGqC_@_OiDoG}AwCm@mHiBoCm@iEgAy@Mm@CkABw@Jw@Py@Xu@^uAlA_AjAaA`C]lBgBxOSbB]hBs@xBa@~@o@jAaAtAuApAk@j@mAt@o@ZuAf@_ATeBVu@HkBAiBKm@KwDcAwKeDkBc@qEg@mBCgBDkBPeC\\oBd@mD|A{Ax@{AfAmDrCaBjAy@`@u@Xm@Py@LyBHeAEsASuGyAgNqDeQaEu@W[OoAw@{@y@i@m@kAmBo@}AwDuNi@mAm@y@m@o@cAo@eAa@wAS_A?cAJw@Tc@Rm@`@wCvCk@r@gFfFqMdM}@t@u@\\}@X[F}@Du@Aw@O}@Y{@i@iAeAwK_LmAuAkAiBa@y@o@aB_BkFgBgFgAuBmA}AkB{Bm@iAe@qA_@gBS{BAcA@i@h@aJ?uAMcBOw@W{@o@uA[g@g@k@eA{@_Aa@cAW}@K{MaAgFc@oJo@eFc@mB_@mA_@gCeA}ByA}BoBuBiCiBuCqMyTyAqBgAiAk@_@{@c@aAa@kB_@oAG{@BiAH{AT_Gp@kDVgACeASk@Mu@a@YQq@o@w@iAWi@k@mB{AyGeA_EeDcNiAcFKmACeABoAdBmRPaBF{@?}AAk@KcBU{AOu@]s@yAsBq@q@eAy@aCkAkA[gDe@{JuA_B_@sAc@oBaAwBoA}AoAoAiACSaBiCkAwBm@m@WIs@EmIToJnC}AX_GHwAHeB\\g@N{Al@wAv@oChBwEbDaB`A{B`AeDbA{A\\aBTcW|AeALwHjBqFlAeBl@aDbBiA`@cAVoQpDs@F{AEeEo@q@EwAHeARyAf@mBn@a@JqAH_BA}@M}@WgAe@oIuEeB}@aDzFqBAmAGc@Ky@]_B{@{CgAcDyAmA_@[?S[}AcB{@q@m@WqAUi@CgBJk@Hq@T_@TiEdDa@Zo@t@kAzAc@`@QLs@?aBWcCo@iAMiACcADP~B@lBGhCCn@SfBe@tCc@zAcApCq@lAmAfBqAvAqBbBwA`AoAl@WR}Bl@gC^oMpA}@PgAj@_AhAw@xAW~@Kn@CzANbBvB~P`@hDJjAAtCINo@vFk@`BMTOJc@n@s@z@oEzEAP_E`E]f@Wl@Or@MpAAxAVvPF`GG~AKl@Up@i@fA]`@u@n@mCnAoPtH}Ax@qBzAyAzAkB|B}@zA_Utd@_@x@Ut@YfBMlC?tARpBvBzJRlAJnBRjMHtANbAb@vAlCrGVt@Rz@Nx@NrADjAA|AIvBUbDC~A@|AFhAH|@\\xBVlAn@tBx@hBzAxC`BvC~AxCLZdB|CjB~CdA~Ap@nA`@bAPj@Lt@tAhNj@hGpAhMHhA@`AIzAQjAg@~AcBdEk@`BcApCSt@EX?bADf@Tv@NZRZVTXP~Ar@j@^`@j@n@jAVh@Nb@Hb@Vd@V\\r@j@XRt@Zv@JzFIj@Jl@Tp@h@f@n@Pf@Rt@jAzHjAzGR|AL~AF|A?nBiA`\\g@lNMhCOtAWfA]~@k@bA[`@y@t@e@Xs@ZkAXgDReGR_FTgAPiA^cAr@s@r@uAlBqAlBgApA}@r@}@f@wAh@kEv@eC\\_Fx@oLnBkAZg@TgAp@g@b@cEpEqOxP]h@m@jAKd@Kn@Cv@BbDFhBBtCUfGi@~HOxASfA[x@g@v@k@n@}@l@qCjA_Bz@m@^yAzAeC~Ca@\\c@Vg@P_ALmAFiCD@RHNTBN?F|IEd@[lAGb@UfD@l@Hh@HTH|AAr@OrAEp@U~@o@vAg@|@Wv@OjA@Zj@vBf@`Bv@nDjAxCVx@Df@Cj@ZZdCdBbBn@rB`@VJ\\t@vA~H`@tCxAbHb@lB`@|Bn@nB`@~BBbB[rDiApDUGmFaDIQCgCIc@IS[]i@_@SIFd@EXGP]TWLuEzAm@b@k@f@u@\\]kB_@C]OUWSCC]GUCEiChAYgAGOiC\\mDNU?e@KuBkA_@GO@g@XgBbA]@e@CK@eBq@[WSWc@aAcAmD}@oDQ_AUoB[qAiAkDSg@Y]SG_@AcAX_A`@}@n@w@x@c@r@Sv@YzAm@vB[r@u@`AkAhAi@Ny@b@g@d@m@`Ae@p@_AdAyBrB]d@wAlCc@Ge@?SJYd@aA~B]f@k@b@eBd@SBI`@_@dAYd@UXa@R_@DQA_A}@kAa@WAcBT]Ae@ImAYU@k@Xq@f@Q\\K|@Ux@QlA?d@Fj@SCg@Q_@_@Ue@i@eBUYa@UUI{@m@[g@c@u@OMUI]AYJWT[n@S|@OhA[dAYn@YXs@f@i@X}@\\_BPeCNwBBgEe@i@Qy@e@}@k@s@Yo@EyBDeAM]GqJOwAHoCb@oGb@sA?_BUqAYc@O[Q[YY_@{BqDs@wAcC_G_@u@YYmCsB[a@g@eAqAgEkDeI}@gBq@}@{B_Cw@s@e@g@}@iAqCcFq@yAg@}@u@oBeAaDc@cA{@}AwAwBsG}H}@kAeAcB]w@e@{A]cBSuBCkADgDNiET_H?qACm@SyAYcAUi@g@{@{@}@w@k@gHoEcCgA_E{AcEqAeA_@qAq@}@u@mAqA}AyB]m@mFmHw@qAg@iBOuACiBD}@HaAhFiT~CiNNaAFs@BsAI{AQoAY{@Wi@]m@kIaKuB{BkC_CyD_D}OoNiAy@qAk@gEsAeAg@cBuAqFgFmCuCgFeGmFoGu@gAUy@YwCIaB?g@JsDN}D?uAGgAQ}@_@aAU]i@k@eAm@mLoEaCoAiGiDuHgE}@a@_Ck@kAGmBLoM~A{ACkOaEgAc@_Ak@oCgCeAi@aJaDuCcAiAq@m@i@u@u@PeAv@mKh@wGZ{ELmEAwAMkBUyAa@sAsBiGgLe[aE_LSq@Q_AIk@Ae@F{AToBzDgVPoAD_A?cASuFSyBS_AeA}Dk@uCIi@_@gDc@yF?q@@q@Hq@jAuFRu@Ri@dAgBrB_Cd@o@`@u@J]LaAF_D@}APiGAeAKwAeC_PIw@?oABe@Hc@Vw@Vo@bCyDvBeDpI_O`AoBVw@BMBk@A_@Eg@Uw@u@gBmAgCUo@YqAkBsQEo@CiBZ}F`@aHDiAAeAOuAg@iCqB{Hg@wBO{@MqA?m@Fw@|@aDhDiK`AeDLw@D_@?e@Cs@{@mGsBaNeAwGSmAMe@s@eA[[w@c@mQuGw@Qa@Eq@?g@JeAd@}HlEiCpAw@XuARwAAg@E_@Qk@]oB}AwCmCiEiEaDqCwB_BkEyDuEsDkCeCoBuB}A_CqEaHmAkBwCqD}BiC_EiEm@m@y@mAa@y@_DmFuDyFOg@k@sC}@yDiAoGQw@c@mAwDeGcA}Ae@i@QIg@KaAIq@Km@WeBcCmAwAw@cAk@kAGa@Gq@@[B]b@oBt@cEcAuDc@wAmLsc@s@{BqJmWqIoVsIaVcFyNgWws@_DgIg@gBMeAAq@Jo@La@dBaBvG{F|GcGVGZId@?\\FXPX\\Nb@Dr@Gd@Q`@[\\[N]Bk@@o_@sKuA]qEs@kIqBskAu\\eHsBcBa@kAUcL}Aui@kGuBc@aBg@_Bo@qXyMkHgDuEeBc[aKsCcAkBw@eG_DaYuOy\\qRoBuA_RqNwAcA{BiBmDmCkIgGmPaMkAaAyAyAI_@A_@HYxDiIPAPYQXQ@MX"}}]}

当前Vue.js组件代码

<template>
  <div>
    <GMapMap
      :center="center"
      :zoom="13"
      map-type-id="terrain"
      style="width: 100%; height: 100%; position: absolute"
      
    >
    </GMapMap>
  </div>
</template>
  
<script>
export default {
  data() {
    return {
      center: { lat: 31.950695, lng: 35.923022 },
    }
  }
}
</script>

需求

我需要在上述Vue.js项目的地图上解码并展示Google Routes API返回的编码折线，目前只知道有在线解码工具，但找不到项目中可用的实现方案。

内容的提问来源于stack exchange，提问作者fadl masri

Vue.js项目中如何解码并展示Google Routes API的编码折线？

问题背景 #

API返回的JSON数据 #

当前Vue.js组件代码 #

需求 #

问题背景

API返回的JSON数据

当前Vue.js组件代码

需求