本文介绍了Google地图编码折线未按预期显示的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图创建一个加拿大所有省份的编码折线。我开始使用这个工具:





但是当我将多段线插入到代码中进行映射时,它会给我提供部分不同的行:



任何想法为什么线偏离?我尝试了两次,每次中途换行。



谢谢

解决方案

您需要转义字符串中的\字符(用双\\替换单个\)。

更改:

  var decodedPath = google.maps.geometry.encoding.decodePath('wkllHvswcQ_N`Kgl @ jDJuEyIwIgv_TYuymWyusd @ wbOqcLrgd @ yvn @ fqsH_ulc @ iuMgppAhoWixv @ v |摄氏度} vXf`uD_ {K`idAp} gApjkCynyCtwmB_`rIlobYsia @ tmlFex} CtiiDov {Ov`KivImrH_gSc] gsDwhE} GACC @ {RBER @ SZI {ZH {q _ @ _ EufFkpDsoSicFi} L_EydG`r @ SLC〜 AygLeiCqsQcmG {的eM 382 4 _ [_ Bi`] dqHwgWdlCg} Wfnr @ rhPpdWi`] hlGn | SnnMf_Lt_D`gShpEzgLni @〜qIjc @ PUE} pAtcAaEfsDkc @ zyEbxD | aObNbwMhmG〜xLnuBraMpxBnr @ jaItw\bkA`dCto @ ucAtrBhqEcHvv @ X {BfuCvrBn〜Gd` ÿ@ nolAtrGtcA`gPpf\gv @〜lEdxHnuP〜I @ xbHhaBzpCdaGqGbpEzeM`j @ ZPN | bKjdEr {F`〜镨| xAtkcAzWrjtJzwb @ PN〜Ajfe @} oUvbT_mE`oCrjDnpAor @ nnDtcAvvAgaK〜cAytAhtE | pCdbDePfnEivIfq @ ujDr | BabDdhEeP`qLx { ?DF {sAvl〜宿迁@ vh`FxvfBlf_F RA {@网@频率{fAouc @〜HRM | O_mEcaTnr @ ohLq | HidCo nModBgaK {{cDcaV @ F` _E _ @ {} hBa`EfiAy @ Cch中{adCivDaqD} qC_mEukJcjA_gIohD NB afDq_BiwGtrAc {} NyeAwlHw_C_tFi`F_pBbjAqfBk_AoupB〜瓦@ iusIfbjAwr} {氩@ rEwab SB ^ ibSnjZxVrpd @`yFrtWxVngJchXncW {wSrqGgpCzKs_ @ glA_ |?HhqEs〜 HlTk〜NmdEqxCrnBuS | gAn\tjDunAduChh @ jdEdqFjoF | AhoFykAn`GuSb〜E〜bAzrB} d |电脑| BAV}的Ct | EtjDet @〜@ aOmn` @ vjg我{p @ TDR {rsGbbkT〜wJff} // @ ZJT JC〜 BgpFnq] LX @ fyYyqBtb ^ TME | aOwvDttWwnOhoFzUpuaBcg @ FSD {kBucApr @〜@ zKhx @ pnBvzAfvTklGpuEka @ flAix qnB_fBwIvXrnBsxB | X @ eFnpA {_ @ ZKL @ zZre @ gChWdn @ aS`] ikHlEayAtIgM`] sQzZvl @ fdDik @`{@ npApwDvjAfaKjqBrjDjiA` bDrGjfDzi @ b {@ hCbhBxl @ XV @ VB @ zaCxl @ NC @ | _ @ hwCha @ @本身liDj | GwNfn @ | ICR {CHN @ njC`〜@ | @门@ pnBve`aJdPtcAaSd_ @`] R {C {KVG @zmAl {BNU @ joFaI | X @ owBf} @ | @ Kn_BiC`sC`wCplNma室温@ IRG} I @ {v @ ycBgn @`升@ rfArwPa} BjdElJ`bDsvIia @ DP | pCujDsnBozAtmTp [jkHcgEbbDfa @ pcLehCwXlJ〜EBZ} @ ?VX {eBnpA_ShjB_uJia @ eiArqGayCxtAjr @ nyCub @ XZJ {Z @ pGdu @〜@ LEFA〜xUbyAqQ @ gAx_ @ tIvDxeAiWlT_c @ tbGxhArbDfsB`e @ fMnaAjh RGJ | @ urAnkBzi @ nsCoaAvl @ {CBPY @ qVhk @`xGvl @ zrB_IrVvjA`bDeFd_ @ lJiCvNvIsiCvaBePqFpBfQuNbHuDqJ } ItADeMwLxGiAzClEvQoAhNeKQx @ SK {DaDsVpYmH} Ds`F`oC}伏f\ob @ T_ @ yFnTlCtP} VP] uLxJgYzKuAbCcbFlpD {zBni @ itDi_CooA kY`vBicAfn @ {FZI @ qlBjkBT || @ DBK @ jpFrXbuNaU`l EWT |?CqvBvuCel @ yYuOjDshAor @克〜@ _MkO_pAlF} xCca @人@ jJok @ V {H + xAyRsHwg @ iOmSa [〜[q]き@ cFtIgXcHsxCxz @ eUpoC〜I @ xuLo_Jjy_ @ qBtrAmbAhyBwFt〜BSHC?oGd_ @ RP @ pxDoXjsSj [nfPq ^ ZA @ swAlqCoAldHxeB〜kQ`〜平均@ kOhh @'q @`{ @ vKxvCgd 2 R {@ Z〜@ LXC〜`@浩@ RHR {CZX〜\xdCu | @ddB | SF ^ VG @纳克@ prFhu @ PME | G`eC〜OrnBqSxeArd @ dzApGps @ _U @ flAxApd @表示p} @`{@ zRre @`Kt`HaPbhBlEd | @ cFvqBdRr`ByFre @ UvhE_uAt | C __ @ bAk` @烯@ķ{@ tHosAcl @ q_BtHexDf {AopBj | AyRhhCk [tlI`Kb ^ qBjaFmx @ pkIvKnvDkQhmAj @ hmAbAlTmQlTnLxv @ XAL} AqNtu @ lLjnAeMtyDpBbyAe ^ jaFbAz | AlFhtAka @`zCqo @ NR @ ueB_\_w @ fXmeAp {@ iDj_Aoc @ RS @ S [〜`DXC @ xyBtEz | AmRl_Ds` @ n_BbGdwE〜_BdwBfN | uAka @`gEwQzyEsIntBykAjgA} NN {EczBntEoj @ HEDM]} DomCpfE {YlnAgyIjnAut @ qnBooDvg @ yYse @ EFK @ fpK_uBtjDs | C @ XQH} yAucAeXf | FkrG〜wRjNpfEtgAv}的Cp | fGifAfiHgh @ v | CsTnUabA`dC'); 

收件人:

  var decodedPath = google.maps.geometry.encoding.decodePath('wkllHvswcQ_N`Kgl @ jDJuEyIwIgv_TYuymWyusd @ wbOqcLrgd @ yvn @ fqsH_ulc @ iuMgppAhoWixv @ v | oC} vXf`uD_ {K`idAp} gApjkCynyCtwmB_`rIlobYsia @ tmlFex } {CtiiDov Ov`KivImrH_gSc] gsDwhE} GACC @ {RBER @ SZI {ZH {q _ @ _ EufFkpDsoSicFi} L_EydG`r @ SLC〜AygLeiCqsQcmG {的eM 382 4 _ [_ Bi`] dqHwgWdlCg} Wfnr @ rhPpdWi`] hlGn | SnnMf_Lt_D`gShpEzgLni @ 〜qIjc @ PUE} pAtcAaEfsDkc @ zyEbxD | aObNbwMhmG〜xLnuBraMpxBnr @ jaItw\\bkA`dCto @ ucAtrBhqEcHvv @ X {BfuCvrBn〜Gd`y @ nolAtrGtcA`gPpf\\gv @〜lEdxHnuP〜I @ xbHhaBzpCdaGqGbpEzeM`j @ ZPN | bKjdEr {F`〜镨| xAtkcAzWrjtJzwb @ PN〜Ajfe @} oUvbT_mE`oCrjDnpAor @ nnDtcAvvAgaK〜cAytAhtE | pCdbDePfnEivIfq @ ujDr |?BabDdhEeP`qLx {{Df的〜sAvl @宿迁RA vh`FxvfBlf_F {@网@频率{fAouc @〜HRM | O_mEcaTnr @ ohLq |?HidConModBgaK {{cDcaV @ F` _E _ @ {} hBa`EfiAy @ Cch中{adCivDaqD} qC_mEukJcjA_gIohD NB afDq_BiwGtrAc {} NyeAwlHw_C_tFi`F_pBbjAqfBk_AoupB〜瓦@ iusIfbjAwr} {氩@ rEwab SB ^ ibSnjZxVrpd @` yFrtWxVngJchXncW {wSrqGgpCzKs_ @ glA_ | HhqEs〜HlTk〜NmdEqxCrnBuS | gAn\ \\tjDunAduChh @ jdEdqFjoF | AhoFykAn`GuSb〜E〜bAzrB} d | PC | BAV}的Ct | EtjDet @〜aOmn` @ vjg @我{P @ TDR {rsGbbkT〜wJff} @ ZJT @ JC〜BgpFnq] LX @ fyYyqBtb ^ TME | aOwvDttWwnOhoFzUpuaBcg @ FSD {kBucApr @〜zKhx @ pnBvzAfvTklGpuEka @ flAix @ qnB_fBwIvXrnBsxB | X @ eFnpA {_ @ ZKL @ zZre @ gChWdn @ aS`] ikHlEayAtIgM`] sQzZvl @ fdDik @`{@ npApwDvjAfaKjqBrjDjiA`bDrGjfDzi @ b {@hCbhBxl @ XV @ VB @ zaCxl @ NC @ | _ @ hwCha @ @本身liDj | GwNfn @ | ICR {CHN @ njC`〜@ | @门@ pnBve`aJdPtcAaSd_ @`] R {C {KVG @ zmAl {BNU @ joFaI | X @ owBf} @ | @ Kn_BiC`sC`wCplNma室温@ IRG} I @ {v @ ycBgn @`升@ rfArwPa} BjdElJ`bDsvIia @ DP | pCujDsnBozAtmTp [jkHcgEbbDfa @ pcLehCwXlJ〜EBZ} @vX {eBnpA_ShjB_uJia @ eiArqGayCxtAjr @ ?nyCub @ XZJ {Z @ pGdu @〜@ LEFA〜xUbyAqQ @ gAx_ @ tIvDxeAiWlT_c @ tbGxhArbDfsB`e @ fMnaAjh RGJ | @ urAnkBzi @ nsCoaAvl @ {CBPY @ qVhk @`xGvl @ zrB_IrVvjA`bDeFd_ @ lJiCvNvIsiCvaBePqFpBfQuNbHuDqJ} ItADeMwLxGiAzClEvQoAhNeKQx @ SK {DaDsVpYmH }} Ds`F`oC @ Vf\\ob T_ @ yFnTlCtP} VP] uLxJgYzKuAbCcbFlpD {zBni @ itDi_CooA kY`vBicAfn @ {FZI @ qlBjkBT || @ DBK @ jpFrXbuNaU`l EWT |?CqvBvuCel @ yYuOjDshAor @克〜 @_MkO_pAlF} xCca @人@ jJok @ V {H + xAyRsHwg @ iOmSa [〜[q]き@ cFtIgXcHsxCxz @ eUpoC〜I @ xuLo_Jjy_ @ q BtrAmbAhyBwFt〜BSHC?oGd_ @ RP @ pxDoXjsSj [nfPq ^ ZA @ swAlqCoAldHxeB〜kQ`〜平均@ kOhh @'Q @`{@ vKxvCgd 5 R {@ Z〜@ LXC〜`@浩@ RHR {CZX〜\\\ \\xdCu | @ddB | SF ^ VG @纳克@ prFhu @ PME | G`eC〜OrnBqSxeArd @ dzApGps @ _U @ flAxApd @表示p} @`{@ zRre @`Kt`HaPbhBlEd | @ cFvqBdRr`ByFre @ UvhE_uAt | C __ @ bAk` @烯@ķ{@ tHosAcl @ q_BtHexDf {AopBj | AyRhhCk [tlI`Kb ^ qBjaFmx @ pkIvKnvDkQhmAj @ hmAbAlTmQlTnLxv @ XAL} AqNtu @ lLjnAeMtyDpBbyAe ^ jaFbAz | AlFhtAka @`zCqo @ NR @ ueB_\\_w @ fXmeAp { @ iDj_Aoc @ RS @ S [〜`DXC @ xyBtEz | AmRl_Ds` @ n_BbGdwE〜_BdwBfN | uAka @`gEwQzyEsIntBykAjgA} NN {EczBntEoj @ HEDM]} {DomCpfE @ YlnAgyIjnAut @ qnBooDvg @ yYse EFK @ fpK_uBtjDs | C @ XQH} yAucAeXf | FkrG〜wRjNpfEtgAv}的Cp | fGifAfiHgh @ v | CsTnUabA`dC'); 


代码段:


$ b

google。 maps.event.addDomListener(window,'load',initialize);函数initialize(){var myLatlng = new google.maps.LatLng(61.5780305,-107.1029399); var myOptions = {zoom:3,center:myLatlng,mapTypeId:google.maps.MapTypeId.ROADMAP} var map = new google.maps.Map(document.getElementById(map),myOptions); var decodedPath = google.maps.geometry.encoding.decodePath('wkllHvswcQ_N`Kgl @ jDJuEyIwIgv_TYuymWyusd @ wbOqcLrgd @ yvn @ fqsH_ulc @iuMgppAhoWixv @ v | oC} vXf`uD_ {K`idAp} gApjkCynyCtwmB_`rIlobYsia @ tmlFex} CtiiDov {Ov` KivImrH_gSc] gsDwhE} GACC @ {RBER @ SZI {ZH {q _ @ _ EufFkpDsoSicFi} L_EydG`r @ SLC〜AygLeiCqsQcmG {的eM 382 4 _ [_ Bi`] dqHwgWdlCg} Wfnr @ rhPpdWi`] hlGn | SnnMf_Lt_D`gShpEzgLni @〜qIjc @ PUE} pAtcAaEfsDkc @ zyEbxD | aObNbwMhmG〜xLnuBraMpxBnr @ jaItw\\bkA`dCto @ ucAtrBhqEcHvv @ X {BfuCvrBn〜Gd`y @ nolAtrGtcA`gPpf\\gv @〜lEdxHnuP〜I @ xbHhaBzpCdaGqGbpEzeM`j @ ZPN | bKjdEr {F `〜镨| xAtkcAzWrjtJzwb @ PN〜Ajfe @} oUvbT_mE`oCrjDnpAor @ nnDtcAvvAgaK〜cAytAhtE | pCdbDePfnEivIfq @ ujDr | BabDdhEeP`qLx {{Df的〜sAvl @宿迁RA vh`FxvfBlf_F {@网@频率{fAouc @〜HRM |?O_mEcaTnr @ohLq |?HidConModBgaK {{cDcaV @ F` _E _ @ {} hBa`EfiAy @ Cch中{adCivDaqD} qC_mEukJcjA_gIohD NB afDq_BiwGtrAc {} NyeAwlHw_C_tFi`F_pBbjAqfBk_AoupB〜瓦@ iusIfbjAwr} {氩@ rEwab SB ^ ibSnjZxVrpd @`yFrtWxVngJchXncW {wSrqGgpCzKs_ @ glA_ | HhqEs〜HlTk〜NmdEqxCrnBuS | gAn\\tjDunAduChh @ jdEdqFjoF | AhoFykAn`GuSb〜E〜bAzrB} d |电脑| BAV}的Ct | EtjDe吨@〜aOmn` @ vjg @我{P @ TDR {rsGbbkT〜wJff} @ ZJT @ JC〜BgpFnq] LX @ fyYyqBtb ^ TME | aOwvDttWwnOhoFzUpuaBcg @ FSD {kBucApr @〜zKhx @ pnBvzAfvTklGpuEka @ flAix @ qnB_fBwIvXrnBsxB | X @ eFnpA { _ @ ZKL @ zZre @ gChWdn @ aS`] ikHlEayAtIgM`] sQzZvl @ fdDik @`{@ npApwDvjAfaKjqBrjDjiA`bDrGjfDzi @ b {@ hCbhBxl @ XV @动@ zaCxl @ NC @ | _ @ hwCha @ @本身liDj | GwNfn @ | ICR {CHN @ njC`〜@ | @门@ pnBve`aJdPtcAaSd_ @`] R {C {KVG @ zmAl {BNU @ joFaI | X @ owBf} @ | @ Kn_BiC`sC`wCplNma室温@ IRG} I @ {v @ ycBgn @`l在rfArwPa} BjdElJ`bDsvIia @ DP |?pCujDsnBozAtmTp [jkHcgEbbDfa @ pcLehCwXlJ〜EBZ} {@vX @ eBnpA_ShjB_uJia @ eiArqGayCxtAjr @ nyCub XZJ {Z @ pGdu @〜@ LEFA〜xUbyAqQ @ gAx_ @ tIvDxeAiWlT_c tbGxhArbDfsB`e @ fMnaAjh @ RGJ | @ urAnkBzi @ nsCoaAvl @ {CBPY @ qVhk @`xGvl @ zrB_IrVvjA`bDeFd_ @ lJiCvNvIsiCvaBePqFpBfQuNbHuDqJ} ItADeMwLxGiAzClEvQoAhNeKQx @ SK {DaDsVpYmH} Ds`F`oC} Vf\\ob @ T_ @ yFnTlCtP} VP] uLxJgYzKuAbCcbFlpD {zBni @ itDi_CooA kY`vBicAfn @ {FZI @ qlBjkBT || @ DBK @ jpFrXbuNaU`l EWT |?CqvBvuCel @ yYuOjDshAor @克〜@ _MkO_pAlF} xCca @人@ jJok @ V {H + xAyRsHwg @ iOmSa [〜[q]き@ cFtIgXcHsxCxz @ eUpoC〜I @ xuLo_Jjy_ @ qBtrAmbAhyBwFt〜BSHC?oGd_ @ RP @ pxDoXjsSj [nfPq ^ ZA @ swAlqCoAldHxeB〜kQ`〜甲VG @ kOhh @'Q @`{@ vKxvCgd 5 R {@ Z〜@ LXC〜`@浩@ RHR {CZX〜\\xdCu | @ddB | SF ^ VG @纳克@ prFhu @ PME | G`eC 〜OrnBqSxeArd @ dzApGps @ _U @ flAxApd @表示p} @`{@ zRre @`Kt`HaPbhBlEd | @ cFvqBdRr`ByFre @ UvhE_uAt | C __ @ bAk` @烯@ķ{@ tHosAcl @ q_BtHexDf {AopBj | AyRhhCk [tlI`Kb ^ qBjaFmx @ pkIvKnvDkQhmAj @ hmAbAlTmQlTnLxv @ XAL} AqNtu @ lLjnAeMtyDpBbyAe ^ jaFbAz | AlFhtAka @`zCqo @ NR @ ueB_\\_w @ fXmeAp {@ iDj_Aoc @ RS @ S [〜`DXC @ xyBtEz | AmRl_Ds` @ n_BbGdwE〜_BdwBfN | uAka @`gEwQzyEsIntBykAjgA} NN {EczBntEoj @ HEDM]} {DomCpfE @ YlnAgyIjnAut @ qnBooDvg @ yYse EFK @ fpK_uBtjDs | C @ XQH} yAucAeXf | FkrG〜wRjNpfEtgAv}的Cp | fGifAfiHgh @ v | CsTnUabA`dC'); VAR decodedLevels = decodeLevels( BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB); var setRegion = new google.maps.Polyline({path:decodedPath,levels:decodedLevels,strokeColor:'#8A8000',strokeOpacity:1.0,strokeWeight:2,fillColor:'#8A8A1D',fillOpacity:0,map:map}) ;} function decodeLevels(encodedLevelsString){var decodedLevels = []; for(var i = 0; i< encodedLevelsString.length; ++ i){var level = encodedLevelsString.charCodeAt(i) - 63; decodedLevels.push(电平); }返回decodeLevels;} < script type = text / javascriptsrc =http://maps.google.com/maps/api/js?libraries=geometry>< / script>< div id =map>< / div>


I'm trying to create an encoded polyline of all Canadian provinces. I begun with this utility:

https://developers.google.com/maps/documentation/utilities/polylineutility

Using it I create many point to follow the province line of ontario as closely as possible. Here's a screenshot of the resulting polyline:

but when I take the polyline an plug it into the code to map it, It provides me with partially different line:

http://jsfiddle.net/2x6eLLca/1/

    <html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&amp;sensor=false"></script>
<style type="text/css">
#map {width:670px;height:600px;}
</style>
<script type='text/javascript'>
function initialize() {
    var myLatlng = new google.maps.LatLng(61.5780305,-107.1029399);
    var myOptions = {
        zoom: 3,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map"), myOptions);

    var decodedPath = google.maps.geometry.encoding.decodePath('wkllHvswcQ_N`Kgl@jDJuEyIwIgv_TYuymWyusd@wbOqcLrgd@yvn@fqsH_ulc@iuMgppAhoWixv@v|oC}vXf`uD_{K`idAp}gApjkCynyCtwmB_`rIlobYsia@tmlFex}CtiiDov{Ov`KivImrH_gSc]gsDwhE}gAcc@{rBer@szI{zH{q_@_EufFkpDsoSicFi}L_EydG`r@slC~AygLeiCqsQcmG{eM~S_[_Bi`]dqHwgWdlCg}Wfnr@rhPpdWi`]hlGn|SnnMf_Lt_D`gShpEzgLni@~qIjc@puE}pAtcAaEfsDkc@zyEbxD|aObNbwMhmG~xLnuBraMpxBnr@jaItw\bkA`dCto@ucAtrBhqEcHvv@x{BfuCvrBn~Gd`y@nolAtrGtcA`gPpf\gv@~lEdxHnuP~i@xbHhaBzpCdaGqGbpEzeM`j@zpN|bKjdEr{F`~Pr|xAtkcAzWrjtJzwb@pn~Ajfe@}oUvbT_mE`oCrjDnpAor@nnDtcAvvAgaK~cAytAhtE|pCdbDePfnEivIfq@ujDr|BabDdhEeP`qLx{Df{sAvl~Ethc@vh`FxvfBlf_F?ra{@web@f{fAouc@~hRm|O_mEcaTnr@ohLq|HidConModBgaK{cDcaV{f`@_e_@{hBa`EfiAy}Cch@adCivDaqD{qC_mEukJcjA_gIohD}nB?afDq_BiwGtrAc{NyeAwlHw_C_tFi`F_pBbjAqfBk_AoupB}~w@iusIfbjAwr}Ar{rEwab@sb^ibSnjZxVrpd@`yFrtWxVngJchXncW{wSrqGgpCzKs_@glA_|HhqEs~HlTk~NmdEqxCrnBuS|gAn\tjDunAduChh@jdEdqFjoF|AhoFykAn`GuSb~E~bAzrB}D|pC|bAv}Ct|EtjDet@~aOmn`@vjg@i{p@tdR{rsGbbkT~wJff}@zjt@jc~BgpFnq]lx@fyYyqBtb^tmE|aOwvDttWwnOhoFzUpuaBcg@fsD{kBucApr@~zKhx@pnBvzAfvTklGpuEka@flAix@qnB_fBwIvXrnBsxB|x@eFnpA{_@zKl@zZre@gChWdn@aS`]ikHlEayAtIgM`]sQzZvl@fdDik@`{@npApwDvjAfaKjqBrjDjiA`bDrGjfDzi@b{@hCbhBxl@xv@vb@zaCxl@nc@|_@hwCha@se@liDj|GwNfn@|iCr{Chn@njC`~@|gAte@pnBve@`aJdPtcAaSd_@`]r{C{Kvg@zmAl{Bnu@joFaI|x@owBf}@|Kn_BiC`sC`wCplNma@rt@irG}i@{v@ycBgn@`l@rfArwPa}BjdElJ`bDsvIia@dP|pCujDsnBozAtmTp[jkHcgEbbDfa@pcLehCwXlJ~eBz}@vX{eBnpA_ShjB_uJia@eiArqGayCxtAjr@nyCub@xzJ{z@pGdu@~lEfa@?xUbyAqQ~gAx_@tIvDxeAiWlT_c@tbGxhArbDfsB`e@fMnaAjh@rGj|@urAnkBzi@nsCoaAvl@{cBpy@qVhk@`xGvl@zrB_IrVvjA`bDeFd_@lJiCvNvIsiCvaBePqFpBfQuNbHuDqJ}ItADeMwLxGiAzClEvQoAhNeKQx@sK{DaDsVpYmH}Ds`F`oC}Vf\ob@t_@yFnTlCtP}Vp]uLxJgYzKuAbCcbFlpD{zBni@itDi_CooA?kY`vBicAfn@{Fzi@qlBjkBT||Dbk@jpFrXbuNaU`l@eWt|CqvBvuCel@yYuOjDshAor@g~@_MkO_pAlF}xCca@al@jJok@V{h@xAyRsHwg@iOmSa[~[q]ki@cFtIgXcHsxCxz@eUpoC~i@xuLo_Jjy_@qBtrAmbAhyBwFt~BshC?oGd_@rp@pxDoXjsSj[nfPq^za@swAlqCoAldHxeB~kQ`~Avg@kOhh@`q@`{@vKxvCgd@r{@z~@lxC~`@ho@rHr{CzX~\xdCu|@ddB|Sf^vg@ng@prFhu@pmE|G`eC~OrnBqSxeArd@dzApGps@_u@flAxApd@p}@`{@zRre@`Kt`HaPbhBlEd|@cFvqBdRr`ByFre@UvhE_uAt|C__@bAk`@en@k{@tHosAcl@q_BtHexDf{AopBj|AyRhhCk[tlI`Kb^qBjaFmx@pkIvKnvDkQhmAj@hmAbAlTmQlTnLxv@xAl}AqNtu@lLjnAeMtyDpBbyAe^jaFbAz|AlFhtAka@`zCqo@nr@ueB_\_w@fXmeAp{@iDj_Aoc@rs@s[~`Dxc@xyBtEz|AmRl_Ds`@n_BbGdwE~_BdwBfN|uAka@`gEwQzyEsIntBykAjgA}Nn{EczBntEoj@heDm]}DomCpfE{YlnAgyIjnAut@qnBooDvg@yYse@efk@fpK_uBtjDs|c@xqH}yAucAeXf|FkrG~wRjNpfEtgAv}CpR|fGifAfiHgh@v|CsTnUabA`dC');
    var decodedLevels = decodeLevels("BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB");

    var setRegion = new google.maps.Polyline({
        path: decodedPath,
        levels: decodedLevels,
        strokeColor: '#8A8000',
        strokeOpacity: 1.0,
        strokeWeight: 2,
        fillColor: '#8A8A1D',
        fillOpacity: 0,
        map: map
    });
}

function decodeLevels(encodedLevelsString) {
    var decodedLevels = [];

    for (var i = 0; i < encodedLevelsString.length; ++i) {
        var level = encodedLevelsString.charCodeAt(i) - 63;
        decodedLevels.push(level);
    }
    return decodedLevels;
}
</script>
</head>
<body onload="initialize()">
<div id="map"></div>
</body>
</html>

Any Ideas why the line deviates? I tried it twice, each time the line veers of midway.

Thanks

解决方案

You need to escape the "\" characters in the string (replace the single "\" with a double "\\").

Change:

var decodedPath = google.maps.geometry.encoding.decodePath('wkllHvswcQ_N`Kgl@jDJuEyIwIgv_TYuymWyusd@wbOqcLrgd@yvn@fqsH_ulc@iuMgppAhoWixv@v|oC}vXf`uD_{K`idAp}gApjkCynyCtwmB_`rIlobYsia@tmlFex}CtiiDov{Ov`KivImrH_gSc]gsDwhE}gAcc@{rBer@szI{zH{q_@_EufFkpDsoSicFi}L_EydG`r@slC~AygLeiCqsQcmG{eM~S_[_Bi`]dqHwgWdlCg}Wfnr@rhPpdWi`]hlGn|SnnMf_Lt_D`gShpEzgLni@~qIjc@puE}pAtcAaEfsDkc@zyEbxD|aObNbwMhmG~xLnuBraMpxBnr@jaItw\bkA`dCto@ucAtrBhqEcHvv@x{BfuCvrBn~Gd`y@nolAtrGtcA`gPpf\gv@~lEdxHnuP~i@xbHhaBzpCdaGqGbpEzeM`j@zpN|bKjdEr{F`~Pr|xAtkcAzWrjtJzwb@pn~Ajfe@}oUvbT_mE`oCrjDnpAor@nnDtcAvvAgaK~cAytAhtE|pCdbDePfnEivIfq@ujDr|BabDdhEeP`qLx{Df{sAvl~Ethc@vh`FxvfBlf_F?ra{@web@f{fAouc@~hRm|O_mEcaTnr@ohLq|HidConModBgaK{cDcaV{f`@_e_@{hBa`EfiAy}Cch@adCivDaqD{qC_mEukJcjA_gIohD}nB?afDq_BiwGtrAc{NyeAwlHw_C_tFi`F_pBbjAqfBk_AoupB}~w@iusIfbjAwr}Ar{rEwab@sb^ibSnjZxVrpd@`yFrtWxVngJchXncW{wSrqGgpCzKs_@glA_|HhqEs~HlTk~NmdEqxCrnBuS|gAn\tjDunAduChh@jdEdqFjoF|AhoFykAn`GuSb~E~bAzrB}D|pC|bAv}Ct|EtjDet@~aOmn`@vjg@i{p@tdR{rsGbbkT~wJff}@zjt@jc~BgpFnq]lx@fyYyqBtb^tmE|aOwvDttWwnOhoFzUpuaBcg@fsD{kBucApr@~zKhx@pnBvzAfvTklGpuEka@flAix@qnB_fBwIvXrnBsxB|x@eFnpA{_@zKl@zZre@gChWdn@aS`]ikHlEayAtIgM`]sQzZvl@fdDik@`{@npApwDvjAfaKjqBrjDjiA`bDrGjfDzi@b{@hCbhBxl@xv@vb@zaCxl@nc@|_@hwCha@se@liDj|GwNfn@|iCr{Chn@njC`~@|gAte@pnBve@`aJdPtcAaSd_@`]r{C{Kvg@zmAl{Bnu@joFaI|x@owBf}@|Kn_BiC`sC`wCplNma@rt@irG}i@{v@ycBgn@`l@rfArwPa}BjdElJ`bDsvIia@dP|pCujDsnBozAtmTp[jkHcgEbbDfa@pcLehCwXlJ~eBz}@vX{eBnpA_ShjB_uJia@eiArqGayCxtAjr@nyCub@xzJ{z@pGdu@~lEfa@?xUbyAqQ~gAx_@tIvDxeAiWlT_c@tbGxhArbDfsB`e@fMnaAjh@rGj|@urAnkBzi@nsCoaAvl@{cBpy@qVhk@`xGvl@zrB_IrVvjA`bDeFd_@lJiCvNvIsiCvaBePqFpBfQuNbHuDqJ}ItADeMwLxGiAzClEvQoAhNeKQx@sK{DaDsVpYmH}Ds`F`oC}Vf\ob@t_@yFnTlCtP}Vp]uLxJgYzKuAbCcbFlpD{zBni@itDi_CooA?kY`vBicAfn@{Fzi@qlBjkBT||Dbk@jpFrXbuNaU`l@eWt|CqvBvuCel@yYuOjDshAor@g~@_MkO_pAlF}xCca@al@jJok@V{h@xAyRsHwg@iOmSa[~[q]ki@cFtIgXcHsxCxz@eUpoC~i@xuLo_Jjy_@qBtrAmbAhyBwFt~BshC?oGd_@rp@pxDoXjsSj[nfPq^za@swAlqCoAldHxeB~kQ`~Avg@kOhh@`q@`{@vKxvCgd@r{@z~@lxC~`@ho@rHr{CzX~\xdCu|@ddB|Sf^vg@ng@prFhu@pmE|G`eC~OrnBqSxeArd@dzApGps@_u@flAxApd@p}@`{@zRre@`Kt`HaPbhBlEd|@cFvqBdRr`ByFre@UvhE_uAt|C__@bAk`@en@k{@tHosAcl@q_BtHexDf{AopBj|AyRhhCk[tlI`Kb^qBjaFmx@pkIvKnvDkQhmAj@hmAbAlTmQlTnLxv@xAl}AqNtu@lLjnAeMtyDpBbyAe^jaFbAz|AlFhtAka@`zCqo@nr@ueB_\_w@fXmeAp{@iDj_Aoc@rs@s[~`Dxc@xyBtEz|AmRl_Ds`@n_BbGdwE~_BdwBfN|uAka@`gEwQzyEsIntBykAjgA}Nn{EczBntEoj@heDm]}DomCpfE{YlnAgyIjnAut@qnBooDvg@yYse@efk@fpK_uBtjDs|c@xqH}yAucAeXf|FkrG~wRjNpfEtgAv}CpR|fGifAfiHgh@v|CsTnUabA`dC');

To:

var decodedPath = google.maps.geometry.encoding.decodePath('wkllHvswcQ_N`Kgl@jDJuEyIwIgv_TYuymWyusd@wbOqcLrgd@yvn@fqsH_ulc@iuMgppAhoWixv@v|oC}vXf`uD_{K`idAp}gApjkCynyCtwmB_`rIlobYsia@tmlFex}CtiiDov{Ov`KivImrH_gSc]gsDwhE}gAcc@{rBer@szI{zH{q_@_EufFkpDsoSicFi}L_EydG`r@slC~AygLeiCqsQcmG{eM~S_[_Bi`]dqHwgWdlCg}Wfnr@rhPpdWi`]hlGn|SnnMf_Lt_D`gShpEzgLni@~qIjc@puE}pAtcAaEfsDkc@zyEbxD|aObNbwMhmG~xLnuBraMpxBnr@jaItw\\bkA`dCto@ucAtrBhqEcHvv@x{BfuCvrBn~Gd`y@nolAtrGtcA`gPpf\\gv@~lEdxHnuP~i@xbHhaBzpCdaGqGbpEzeM`j@zpN|bKjdEr{F`~Pr|xAtkcAzWrjtJzwb@pn~Ajfe@}oUvbT_mE`oCrjDnpAor@nnDtcAvvAgaK~cAytAhtE|pCdbDePfnEivIfq@ujDr|BabDdhEeP`qLx{Df{sAvl~Ethc@vh`FxvfBlf_F?ra{@web@f{fAouc@~hRm|O_mEcaTnr@ohLq|HidConModBgaK{cDcaV{f`@_e_@{hBa`EfiAy}Cch@adCivDaqD{qC_mEukJcjA_gIohD}nB?afDq_BiwGtrAc{NyeAwlHw_C_tFi`F_pBbjAqfBk_AoupB}~w@iusIfbjAwr}Ar{rEwab@sb^ibSnjZxVrpd@`yFrtWxVngJchXncW{wSrqGgpCzKs_@glA_|HhqEs~HlTk~NmdEqxCrnBuS|gAn\\tjDunAduChh@jdEdqFjoF|AhoFykAn`GuSb~E~bAzrB}D|pC|bAv}Ct|EtjDet@~aOmn`@vjg@i{p@tdR{rsGbbkT~wJff}@zjt@jc~BgpFnq]lx@fyYyqBtb^tmE|aOwvDttWwnOhoFzUpuaBcg@fsD{kBucApr@~zKhx@pnBvzAfvTklGpuEka@flAix@qnB_fBwIvXrnBsxB|x@eFnpA{_@zKl@zZre@gChWdn@aS`]ikHlEayAtIgM`]sQzZvl@fdDik@`{@npApwDvjAfaKjqBrjDjiA`bDrGjfDzi@b{@hCbhBxl@xv@vb@zaCxl@nc@|_@hwCha@se@liDj|GwNfn@|iCr{Chn@njC`~@|gAte@pnBve@`aJdPtcAaSd_@`]r{C{Kvg@zmAl{Bnu@joFaI|x@owBf}@|Kn_BiC`sC`wCplNma@rt@irG}i@{v@ycBgn@`l@rfArwPa}BjdElJ`bDsvIia@dP|pCujDsnBozAtmTp[jkHcgEbbDfa@pcLehCwXlJ~eBz}@vX{eBnpA_ShjB_uJia@eiArqGayCxtAjr@nyCub@xzJ{z@pGdu@~lEfa@?xUbyAqQ~gAx_@tIvDxeAiWlT_c@tbGxhArbDfsB`e@fMnaAjh@rGj|@urAnkBzi@nsCoaAvl@{cBpy@qVhk@`xGvl@zrB_IrVvjA`bDeFd_@lJiCvNvIsiCvaBePqFpBfQuNbHuDqJ}ItADeMwLxGiAzClEvQoAhNeKQx@sK{DaDsVpYmH}Ds`F`oC}Vf\\ob@t_@yFnTlCtP}Vp]uLxJgYzKuAbCcbFlpD{zBni@itDi_CooA?kY`vBicAfn@{Fzi@qlBjkBT||Dbk@jpFrXbuNaU`l@eWt|CqvBvuCel@yYuOjDshAor@g~@_MkO_pAlF}xCca@al@jJok@V{h@xAyRsHwg@iOmSa[~[q]ki@cFtIgXcHsxCxz@eUpoC~i@xuLo_Jjy_@qBtrAmbAhyBwFt~BshC?oGd_@rp@pxDoXjsSj[nfPq^za@swAlqCoAldHxeB~kQ`~Avg@kOhh@`q@`{@vKxvCgd@r{@z~@lxC~`@ho@rHr{CzX~\\xdCu|@ddB|Sf^vg@ng@prFhu@pmE|G`eC~OrnBqSxeArd@dzApGps@_u@flAxApd@p}@`{@zRre@`Kt`HaPbhBlEd|@cFvqBdRr`ByFre@UvhE_uAt|C__@bAk`@en@k{@tHosAcl@q_BtHexDf{AopBj|AyRhhCk[tlI`Kb^qBjaFmx@pkIvKnvDkQhmAj@hmAbAlTmQlTnLxv@xAl}AqNtu@lLjnAeMtyDpBbyAe^jaFbAz|AlFhtAka@`zCqo@nr@ueB_\\_w@fXmeAp{@iDj_Aoc@rs@s[~`Dxc@xyBtEz|AmRl_Ds`@n_BbGdwE~_BdwBfN|uAka@`gEwQzyEsIntBykAjgA}Nn{EczBntEoj@heDm]}DomCpfE{YlnAgyIjnAut@qnBooDvg@yYse@efk@fpK_uBtjDs|c@xqH}yAucAeXf|FkrG~wRjNpfEtgAv}CpR|fGifAfiHgh@v|CsTnUabA`dC');

updated fiddle

code snippet:

google.maps.event.addDomListener(window, 'load', initialize);

function initialize() {
  var myLatlng = new google.maps.LatLng(61.5780305, -107.1029399);
  var myOptions = {
    zoom: 3,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map"), myOptions);

  var decodedPath = google.maps.geometry.encoding.decodePath('wkllHvswcQ_N`Kgl@jDJuEyIwIgv_TYuymWyusd@wbOqcLrgd@yvn@fqsH_ulc@iuMgppAhoWixv@v|oC}vXf`uD_{K`idAp}gApjkCynyCtwmB_`rIlobYsia@tmlFex}CtiiDov{Ov`KivImrH_gSc]gsDwhE}gAcc@{rBer@szI{zH{q_@_EufFkpDsoSicFi}L_EydG`r@slC~AygLeiCqsQcmG{eM~S_[_Bi`]dqHwgWdlCg}Wfnr@rhPpdWi`]hlGn|SnnMf_Lt_D`gShpEzgLni@~qIjc@puE}pAtcAaEfsDkc@zyEbxD|aObNbwMhmG~xLnuBraMpxBnr@jaItw\\bkA`dCto@ucAtrBhqEcHvv@x{BfuCvrBn~Gd`y@nolAtrGtcA`gPpf\\gv@~lEdxHnuP~i@xbHhaBzpCdaGqGbpEzeM`j@zpN|bKjdEr{F`~Pr|xAtkcAzWrjtJzwb@pn~Ajfe@}oUvbT_mE`oCrjDnpAor@nnDtcAvvAgaK~cAytAhtE|pCdbDePfnEivIfq@ujDr|BabDdhEeP`qLx{Df{sAvl~Ethc@vh`FxvfBlf_F?ra{@web@f{fAouc@~hRm|O_mEcaTnr@ohLq|HidConModBgaK{cDcaV{f`@_e_@{hBa`EfiAy}Cch@adCivDaqD{qC_mEukJcjA_gIohD}nB?afDq_BiwGtrAc{NyeAwlHw_C_tFi`F_pBbjAqfBk_AoupB}~w@iusIfbjAwr}Ar{rEwab@sb^ibSnjZxVrpd@`yFrtWxVngJchXncW{wSrqGgpCzKs_@glA_|HhqEs~HlTk~NmdEqxCrnBuS|gAn\\tjDunAduChh@jdEdqFjoF|AhoFykAn`GuSb~E~bAzrB}D|pC|bAv}Ct|EtjDet@~aOmn`@vjg@i{p@tdR{rsGbbkT~wJff}@zjt@jc~BgpFnq]lx@fyYyqBtb^tmE|aOwvDttWwnOhoFzUpuaBcg@fsD{kBucApr@~zKhx@pnBvzAfvTklGpuEka@flAix@qnB_fBwIvXrnBsxB|x@eFnpA{_@zKl@zZre@gChWdn@aS`]ikHlEayAtIgM`]sQzZvl@fdDik@`{@npApwDvjAfaKjqBrjDjiA`bDrGjfDzi@b{@hCbhBxl@xv@vb@zaCxl@nc@|_@hwCha@se@liDj|GwNfn@|iCr{Chn@njC`~@|gAte@pnBve@`aJdPtcAaSd_@`]r{C{Kvg@zmAl{Bnu@joFaI|x@owBf}@|Kn_BiC`sC`wCplNma@rt@irG}i@{v@ycBgn@`l@rfArwPa}BjdElJ`bDsvIia@dP|pCujDsnBozAtmTp[jkHcgEbbDfa@pcLehCwXlJ~eBz}@vX{eBnpA_ShjB_uJia@eiArqGayCxtAjr@nyCub@xzJ{z@pGdu@~lEfa@?xUbyAqQ~gAx_@tIvDxeAiWlT_c@tbGxhArbDfsB`e@fMnaAjh@rGj|@urAnkBzi@nsCoaAvl@{cBpy@qVhk@`xGvl@zrB_IrVvjA`bDeFd_@lJiCvNvIsiCvaBePqFpBfQuNbHuDqJ}ItADeMwLxGiAzClEvQoAhNeKQx@sK{DaDsVpYmH}Ds`F`oC}Vf\\ob@t_@yFnTlCtP}Vp]uLxJgYzKuAbCcbFlpD{zBni@itDi_CooA?kY`vBicAfn@{Fzi@qlBjkBT||Dbk@jpFrXbuNaU`l@eWt|CqvBvuCel@yYuOjDshAor@g~@_MkO_pAlF}xCca@al@jJok@V{h@xAyRsHwg@iOmSa[~[q]ki@cFtIgXcHsxCxz@eUpoC~i@xuLo_Jjy_@qBtrAmbAhyBwFt~BshC?oGd_@rp@pxDoXjsSj[nfPq^za@swAlqCoAldHxeB~kQ`~Avg@kOhh@`q@`{@vKxvCgd@r{@z~@lxC~`@ho@rHr{CzX~\\xdCu|@ddB|Sf^vg@ng@prFhu@pmE|G`eC~OrnBqSxeArd@dzApGps@_u@flAxApd@p}@`{@zRre@`Kt`HaPbhBlEd|@cFvqBdRr`ByFre@UvhE_uAt|C__@bAk`@en@k{@tHosAcl@q_BtHexDf{AopBj|AyRhhCk[tlI`Kb^qBjaFmx@pkIvKnvDkQhmAj@hmAbAlTmQlTnLxv@xAl}AqNtu@lLjnAeMtyDpBbyAe^jaFbAz|AlFhtAka@`zCqo@nr@ueB_\\_w@fXmeAp{@iDj_Aoc@rs@s[~`Dxc@xyBtEz|AmRl_Ds`@n_BbGdwE~_BdwBfN|uAka@`gEwQzyEsIntBykAjgA}Nn{EczBntEoj@heDm]}DomCpfE{YlnAgyIjnAut@qnBooDvg@yYse@efk@fpK_uBtjDs|c@xqH}yAucAeXf|FkrG~wRjNpfEtgAv}CpR|fGifAfiHgh@v|CsTnUabA`dC');
  var decodedLevels = decodeLevels("BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB");

  var setRegion = new google.maps.Polyline({
    path: decodedPath,
    levels: decodedLevels,
    strokeColor: '#8A8000',
    strokeOpacity: 1.0,
    strokeWeight: 2,
    fillColor: '#8A8A1D',
    fillOpacity: 0,
    map: map
  });
}

function decodeLevels(encodedLevelsString) {
  var decodedLevels = [];

  for (var i = 0; i < encodedLevelsString.length; ++i) {
    var level = encodedLevelsString.charCodeAt(i) - 63;
    decodedLevels.push(level);
  }
  return decodedLevels;
}
html,
body,
#map {
  width: 100%;
  height: 100%;
}
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry"></script>

<div id="map"></div>

这篇关于Google地图编码折线未按预期显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-02 21:08