2016-09-21 3 views
0

Ich versuche eine codierte Polylinie aller kanadischen Provinzen zu erstellen. Ich mit diesem Programm begonnen:Google Maps codierte Polylinie wird nicht wie erwartet angezeigt

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

Mit ihm habe ich viele Punkt erstellen die Provinz Linie von Ontario so nah wie möglich zu folgen. Hier ist ein Screenshot des resultierenden Linienzug:

Polyline Utility Result

aber wenn ich die Polylinie nehme einen Stecker es in den Code es auf der Karte, es gibt mir teilweise andere Linie:

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`[email protected][email protected]@[email protected][email protected]@v|oC}vXf`uD_{K`idAp}gApjkCynyCtwmB_`[email protected]}CtiiDov{Ov`KivImrH_gSc]gsDwhE}[email protected]{[email protected]{zH{[email protected]_EufFkpDsoSicFi}L_EydG`[email protected]~AygLeiCqsQcmG{eM~S_[_Bi`]dqHwgWdlCg}[email protected]`]hlGn|SnnMf_Lt_D`[email protected][email protected]}[email protected]|[email protected]\bkA`[email protected]@x{BfuCvrBn~Gd`[email protected]`gPpf\[email protected][email protected]`[email protected]|bKjdEr{F`~Pr|[email protected][email protected]}oUvbT_mE`[email protected]~cAytAhtE|[email protected]|BabDdhEeP`qLx{Df{[email protected]`FxvfBlf_F?ra{@[email protected]{[email protected]~hRm|[email protected]|HidConModBgaK{cDcaV{f`@[email protected]{hBa`EfiAy}[email protected]{qC_mEukJcjA_gIohD}nB?afDq_BiwGtrAc{NyeAwlHw_C_tFi`F_pBbjAqfBk_AoupB}[email protected]}Ar{[email protected]^[email protected]`yFrtWxVngJchXncW{[email protected]_|HhqEs~HlTk~NmdEqxCrnBuS|gAn\[email protected]|AhoFykAn`GuSb~E~bAzrB}D|pC|bAv}Ct|[email protected]~aOmn`@[email protected]{[email protected]{rsGbbkT~wJff}@[email protected]~BgpFnq][email protected]^tmE|[email protected]{[email protected][email protected]@[email protected]_fBwIvXrnBsxB|[email protected]{[email protected]@[email protected]@aS`]ikHlEayAtIgM`][email protected]@`{@npApwDvjAfaKjqBrjDjiA`[email protected]{@[email protected]@[email protected]@[email protected]|[email protected]@[email protected]|[email protected]|iCr{[email protected]`[email protected]|[email protected]@`[email protected]`]r{C{[email protected]{[email protected]|[email protected]}@|Kn_BiC`sC`[email protected]@irG}[email protected]{[email protected]@`[email protected]}BjdElJ`[email protected]|pCujDsnBozAtmTp[[email protected]~eBz}@vX{[email protected]@[email protected]{[email protected]@[email protected][email protected][email protected]`[email protected]@rGj|@[email protected]@{[email protected]@`[email protected]_IrVvjA`[email protected]}[email protected]{DaDsVpYmH}Ds`F`oC}Vf\[email protected][email protected]}Vp]uLxJgYzKuAbCcbFlpD{[email protected]_CooA?kY`[email protected]{[email protected]||[email protected]`[email protected]|[email protected]@[email protected]_MkO_pAlF}[email protected]@[email protected]{[email protected]@iOmSa[~[q][email protected]@[email protected][email protected][email protected]@pxDoXjsSj[nfPq^[email protected]~kQ`[email protected]@`[email protected]`{@[email protected]{@[email protected]~`@[email protected]{CzX~\xdCu|@ddB|Sf^[email protected]@[email protected]|G`[email protected]@[email protected]@p}@`{@[email protected]`Kt`HaPbhBlEd|@cFvqBdRr`[email protected]_uAt|[email protected]`@[email protected]{@[email protected]_BtHexDf{AopBj|AyRhhCk[tlI`Kb^[email protected]@[email protected]}[email protected]^jaFbAz|[email protected]`[email protected]@ueB_\[email protected]{@[email protected]@s[~`[email protected]|AmRl_Ds`@n_BbGdwE~_BdwBfN|[email protected]`gEwQzyEsIntBykAjgA}Nn{[email protected]]}DomCpfE{[email protected]@[email protected]@fpK_uBtjDs|[email protected]}yAucAeXf|FkrG~wRjNpfEtgAv}CpR|[email protected]|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> 

enter image description here

Irgendwelche Ideen, warum die Linie abweicht? Ich habe es zweimal probiert, jedes Mal, wenn die Linie in der Mitte schwankt.

Dank

Antwort

0

Sie müssen die "\" Zeichen in der Zeichenfolge zu entkommen (die Single "\" mit einem Doppel ersetzen "\\").

Wechsel:

var decodedPath = google.maps.geometry.encoding.decodePath('wkllHvswcQ_N`[email protected][email protected]@[email protected][email protected]@v|oC}vXf`uD_{K`idAp}gApjkCynyCtwmB_`[email protected]}CtiiDov{Ov`KivImrH_gSc]gsDwhE}[email protected]{[email protected]{zH{[email protected]_EufFkpDsoSicFi}L_EydG`[email protected]~AygLeiCqsQcmG{eM~S_[_Bi`]dqHwgWdlCg}[email protected]`]hlGn|SnnMf_Lt_D`[email protected][email protected]}[email protected]|[email protected]\bkA`[email protected]@x{BfuCvrBn~Gd`[email protected]`gPpf\[email protected][email protected]`[email protected]|bKjdEr{F`~Pr|[email protected][email protected]}oUvbT_mE`[email protected]~cAytAhtE|[email protected]|BabDdhEeP`qLx{Df{[email protected]`FxvfBlf_F?ra{@[email protected]{[email protected]~hRm|[email protected]|HidConModBgaK{cDcaV{f`@[email protected]{hBa`EfiAy}[email protected]{qC_mEukJcjA_gIohD}nB?afDq_BiwGtrAc{NyeAwlHw_C_tFi`F_pBbjAqfBk_AoupB}[email protected]}Ar{[email protected]^[email protected]`yFrtWxVngJchXncW{[email protected]_|HhqEs~HlTk~NmdEqxCrnBuS|gAn\[email protected]|AhoFykAn`GuSb~E~bAzrB}D|pC|bAv}Ct|[email protected]~aOmn`@[email protected]{[email protected]{rsGbbkT~wJff}@[email protected]~BgpFnq][email protected]^tmE|[email protected]{[email protected][email protected]@[email protected]_fBwIvXrnBsxB|[email protected]{[email protected]@[email protected]@aS`]ikHlEayAtIgM`][email protected]@`{@npApwDvjAfaKjqBrjDjiA`[email protected]{@[email protected]@[email protected]@[email protected]|[email protected]@[email protected]|[email protected]|iCr{[email protected]`[email protected]|[email protected]@`[email protected]`]r{C{[email protected]{[email protected]|[email protected]}@|Kn_BiC`sC`[email protected]@irG}[email protected]{[email protected]@`[email protected]}BjdElJ`[email protected]|pCujDsnBozAtmTp[[email protected]~eBz}@vX{[email protected]@[email protected]{[email protected]@[email protected][email protected][email protected]`[email protected]@rGj|@[email protected]@{[email protected]@`[email protected]_IrVvjA`[email protected]}[email protected]{DaDsVpYmH}Ds`F`oC}Vf\[email protected][email protected]}Vp]uLxJgYzKuAbCcbFlpD{[email protected]_CooA?kY`[email protected]{[email protected]||[email protected]`[email protected]|[email protected]@[email protected]_MkO_pAlF}[email protected]@[email protected]{[email protected]@iOmSa[~[q][email protected]@[email protected][email protected][email protected]@pxDoXjsSj[nfPq^[email protected]lqCoAldHxeB~kQ`[email protected]@`[email protected]`{@[email protected]{@[email protected]~`@[email protected]{CzX~\xdCu|@ddB|Sf^[email protected]@[email protected]|G`[email protected]@[email protected]@p}@`{@[email protected]`Kt`HaPbhBlEd|@cFvqBdRr`[email protected]_uAt|[email protected]`@[email protected]{@[email protected]_BtHexDf{AopBj|AyRhhCk[tlI`Kb^[email protected]@[email protected]}[email protected]^jaFbAz|[email protected]`[email protected]@ueB_\[email protected]{@[email protected]@s[~`[email protected]|AmRl_Ds`@n_BbGdwE~_BdwBfN|[email protected]`gEwQzyEsIntBykAjgA}Nn{[email protected]]}DomCpfE{[email protected]@[email protected]@fpK_uBtjDs|[email protected]}yAucAeXf|FkrG~wRjNpfEtgAv}CpR|[email protected]|CsTnUabA`dC'); 

An:

var decodedPath = google.maps.geometry.encoding.decodePath('wkllHvswcQ_N`[email protected][email protected]@[email protected][email protected]@v|oC}vXf`uD_{K`idAp}gApjkCynyCtwmB_`[email protected]}CtiiDov{Ov`KivImrH_gSc]gsDwhE}[email protected]{[email protected]{zH{[email protected]_EufFkpDsoSicFi}L_EydG`[email protected]~AygLeiCqsQcmG{eM~S_[_Bi`]dqHwgWdlCg}[email protected]`]hlGn|SnnMf_Lt_D`[email protected][email protected]}[email protected]|[email protected]\\bkA`[email protected]@x{BfuCvrBn~Gd`[email protected]`gPpf\\[email protected][email protected]`[email protected]|bKjdEr{F`~Pr|[email protected][email protected]}oUvbT_mE`[email protected]~cAytAhtE|[email protected]|BabDdhEeP`qLx{Df{[email protected]`FxvfBlf_F?ra{@[email protected]{[email protected]~hRm|[email protected]|HidConModBgaK{cDcaV{f`@[email protected]{hBa`EfiAy}[email protected]{qC_mEukJcjA_gIohD}nB?afDq_BiwGtrAc{NyeAwlHw_C_tFi`F_pBbjAqfBk_AoupB}[email protected]}Ar{[email protected]^[email protected]`yFrtWxVngJchXncW{[email protected]_|HhqEs~HlTk~NmdEqxCrnBuS|gAn\\[email protected]|AhoFykAn`GuSb~E~bAzrB}D|pC|bAv}Ct|[email protected]~aOmn`@[email protected]{[email protected]{rsGbbkT~wJff}@[email protected]~BgpFnq][email protected]^tmE|[email protected]{[email protected][email protected]@[email protected]_fBwIvXrnBsxB|[email protected]{[email protected]@[email protected]@aS`]ikHlEayAtIgM`][email protected]@`{@npApwDvjAfaKjqBrjDjiA`[email protected]{@[email protected]@[email protected]@[email protected]|[email protected]@[email protected]|[email protected]|iCr{[email protected]`[email protected]|[email protected]@`[email protected]`]r{C{[email protected]{[email protected]|[email protected]}@|Kn_BiC`sC`[email protected]@irG}[email protected]{[email protected]@`[email protected]}BjdElJ`[email protected]|pCujDsnBozAtmTp[[email protected]~eBz}@vX{[email protected]@[email protected]{[email protected]@[email protected][email protected][email protected]`[email protected]@rGj|@[email protected]@{[email protected]@`[email protected]_IrVvjA`[email protected]}[email protected]{DaDsVpYmH}Ds`F`oC}Vf\\[email protected][email protected]}Vp]uLxJgYzKuAbCcbFlpD{[email protected]_CooA?kY`[email protected]{[email protected]||[email protected]`[email protected]|[email protected]@[email protected]_MkO_pAlF}[email protected]@[email protected]{[email protected]@iOmSa[~[q][email protected]@[email protected][email protected][email protected]@pxDoXjsSj[nfPq^[email protected]~kQ`[email protected]@`[email protected]`{@[email protected]{@[email protected]~`@[email protected]{CzX~\\xdCu|@ddB|Sf^[email protected]@[email protected]|G`[email protected]@[email protected]@p}@`{@[email protected]`Kt`HaPbhBlEd|@cFvqBdRr`[email protected]_uAt|[email protected]`@[email protected]{@[email protected]_BtHexDf{AopBj|AyRhhCk[tlI`Kb^[email protected]@[email protected]}[email protected]^jaFbAz|[email protected]`[email protected]@ueB_\\[email protected]{@[email protected]@s[~`[email protected]|AmRl_Ds`@n_BbGdwE~_BdwBfN|[email protected]`gEwQzyEsIntBykAjgA}Nn{[email protected]]}DomCpfE{[email protected]@[email protected]@fpK_uBtjDs|[email protected]}yAucAeXf|FkrG~wRjNpfEtgAv}CpR|[email protected]|CsTnUabA`dC'); 

updated fiddle

fixed encoded polyline

Code-Schnipsel:

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`[email protected][email protected]@[email protected][email protected]@v|oC}vXf`uD_{K`idAp}gApjkCynyCtwmB_`[email protected]}CtiiDov{Ov`KivImrH_gSc]gsDwhE}[email protected]{[email protected]{zH{[email protected]_EufFkpDsoSicFi}L_EydG`[email protected]~AygLeiCqsQcmG{eM~S_[_Bi`]dqHwgWdlCg}[email protected]`]hlGn|SnnMf_Lt_D`[email protected][email protected]}[email protected]|[email protected]\\bkA`[email protected]@x{BfuCvrBn~Gd`[email protected]`gPpf\\[email protected][email protected]`[email protected]|bKjdEr{F`~Pr|[email protected][email protected]}oUvbT_mE`[email protected]~cAytAhtE|[email protected]|BabDdhEeP`qLx{Df{[email protected]`FxvfBlf_F?ra{@[email protected]{[email protected]~hRm|[email protected]|HidConModBgaK{cDcaV{f`@[email protected]{hBa`EfiAy}[email protected]{qC_mEukJcjA_gIohD}nB?afDq_BiwGtrAc{NyeAwlHw_C_tFi`F_pBbjAqfBk_AoupB}[email protected]}Ar{[email protected]^[email protected]`yFrtWxVngJchXncW{[email protected]_|HhqEs~HlTk~NmdEqxCrnBuS|gAn\\[email protected]|AhoFykAn`GuSb~E~bAzrB}D|pC|bAv}Ct|[email protected]~aOmn`@[email protected]{[email protected]{rsGbbkT~wJff}@[email protected]~BgpFnq][email protected]^tmE|[email protected]{[email protected][email protected]@[email protected]_fBwIvXrnBsxB|[email protected]{[email protected]@[email protected]@aS`]ikHlEayAtIgM`][email protected]@`{@npApwDvjAfaKjqBrjDjiA`[email protected]{@[email protected]@[email protected]@[email protected]|[email protected]@[email protected]|[email protected]|iCr{[email protected]`[email protected]|[email protected]@`[email protected]`]r{C{[email protected]{[email protected]|[email protected]}@|Kn_BiC`sC`[email protected]@irG}[email protected]{[email protected]@`[email protected]}BjdElJ`[email protected]|pCujDsnBozAtmTp[[email protected]~eBz}@vX{[email protected]@[email protected]{[email protected]@[email protected][email protected][email protected]`[email protected]@rGj|@[email protected]@{[email protected]@`[email protected]_IrVvjA`[email protected]}[email protected]{DaDsVpYmH}Ds`F`oC}Vf\\[email protected][email protected]}Vp]uLxJgYzKuAbCcbFlpD{[email protected]_CooA?kY`[email protected]{[email protected]||[email protected]`[email protected]|[email protected]@[email protected]_MkO_pAlF}[email protected]@[email protected]{[email protected]@iOmSa[~[q][email protected]@[email protected][email protected][email protected]@pxDoXjsSj[nfPq^[email protected]~kQ`[email protected]@`[email protected]`{@[email protected]{@[email protected]~`@[email protected]{CzX~\\xdCu|@ddB|Sf^[email protected]@[email protected]|G`[email protected]@[email protected]@p}@`{@[email protected]`Kt`HaPbhBlEd|@cFvqBdRr`[email protected]_uAt|[email protected]`@[email protected]{@[email protected]_BtHexDf{AopBj|AyRhhCk[tlI`Kb^[email protected]@[email protected]}[email protected]^jaFbAz|[email protected]`[email protected]@ueB_\\[email protected]{@[email protected]@s[~`[email protected]|AmRl_Ds`@n_BbGdwE~_BdwBfN|[email protected]`gEwQzyEsIntBykAjgA}Nn{[email protected]]}DomCpfE{[email protected]@[email protected]@fpK_uBtjDs|[email protected]}yAucAeXf|FkrG~wRjNpfEtgAv}CpR|[email protected]|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>

+0

Großen. Vielen Dank. – Lukasz

+0

Es gibt immer noch eine Diskrepanz zwischen meiner ursprünglichen Linie und der daraus resultierenden Geige. Es ist sichtbar, wenn die Karte in der Nähe von Pointe-au-Chene, QC (östliche Spitze) gezoomt ist. – Lukasz

+0

Sind Sie sicher, dass das nicht in den Originaldaten liegt? [Geige] (http://jsfiddle.net/geocodezip/2x6eLLca/4/) – geocodezip

Verwandte Themen