谷歌地圖編碼字符串顯示不正確

Question

重寫問題以使其對其他人有用：在使用 google maps api encodePoly 對上傳到我的數據庫的折線進行編碼后。 當我下載、解碼和顯示時，它顯示不正確。

附圖片

我學到的是，我需要在對路徑進行編碼之后和發送到 POST 到數據庫之前立即將 \\ 替換為 \\。

如果您下載，解碼然后替換它為時已晚。 現在說得通了。

          function transferRteData(runPath,map) {
                var encodedPath = google.maps.geometry.encoding.encodePath(runPath.getPath());
                encodedPath=encodedPath.replace(/\\/g, "\\\\");
                var data =  {'encodedPath':encodedPath,};

                $.getJSON("{% url 'getfitmappedrte-view' %}", data, function(response){
                    if(response === 'success'){ alert('Yay!'); }
                    else{ alert('Error! :('); }
                });

          } //Close Transfer Data

Answer 1

相關問題：

• Google 路線 api 概覽折線不起作用
• 修復谷歌地圖折線的編碼字符串
• 谷歌地圖編碼折線渲染錯誤

編碼折線中的\\字符需要轉義（使用另一個\\ ，使它們成為\\\\ ）

var trythis="mnniGr~|cNHl@Fl@BL??ABABAB?@?B?@@BHp@F`@Ht@L`A@?XW@A@A@?@??@?@@D@RJENEXKlA_@xBs@bA]LCRIXIJCNCrDo@REx@QXE|@QRE??b@hDTfBR|ArAfKVxBLh@bA|HDb@N`Ab@hDF`@Hp@BLHr@Jv@x@bGZ~B\pCd@pD\fC^rCVfBFb@F`@x@fGR|Af@nDPvAF`@LbA^rCHn@Lz@n@tEr@nFp@zENdA^xCZ`CLx@PvAT~AHl@PxAHn@ZrB^tCDPXtBFl@RzABRF`@ZbCJr@Hl@Jn@XnBN|@Hd@BJBHDJDJDLHNDDBFBBBBB@zBhCJNNRNZHVJVHXPlAFh@DXFj@BL@L@J@L@J@N?L@N?J@P?Z?d@EtAA\C`BATAT?RALARAJAHALAHCLEXCFAJCHERERGVo@lCu@|Cg@zBWfA[rA[rAg@rBSz@UhASx@M|@O`AIz@Gv@Ex@Cd@GnBCx@@h@@rA?b@Bn@B^f@rDfAtINbAb@~CXjB"

應該是：

var trythis="mnniGr~|cNHl@Fl@BL??ABABAB?@?B?@@BHp@F`@Ht@L`A@?XW@A@A@?@??@?@@D@RJENEXKlA_@xBs@bA]LCRIXIJCNCrDo@REx@QXE|@QRE??b@hDTfBR|ArAfKVxBLh@bA|HDb@N`Ab@hDF`@Hp@BLHr@Jv@x@bGZ~B\\pCd@pD\\fC^rCVfBFb@F`@x@fGR|Af@nDPvAF`@LbA^rCHn@Lz@n@tEr@nFp@zENdA^xCZ`CLx@PvAT~AHl@PxAHn@ZrB^tCDPXtBFl@RzABRF`@ZbCJr@Hl@Jn@XnBN|@Hd@BJBHDJDJDLHNDDBFBBBBB@zBhCJNNRNZHVJVHXPlAFh@DXFj@BL@L@J@L@J@N?L@N?J@P?Z?d@EtAA\\C`BATAT?RALARAJAHALAHCLEXCFAJCHERERGVo@lCu@|Cg@zBWfA[rA[rAg@rBSz@UhASx@M|@O`AIz@Gv@Ex@Cd@GnBCx@@h@@rA?b@Bn@B^f@rDfAtINbAb@~CXjB"

代碼片段：

 function initialize() { var map = new google.maps.Map( document.getElementById("map_canvas"), { center: new google.maps.LatLng(37.4419, -122.1419), zoom: 13, mapTypeId: google.maps.MapTypeId.ROADMAP }); var polyline = new google.maps.Polyline({ path: google.maps.geometry.encoding.decodePath("mnniGr~|cNHl@Fl@BL??ABABAB?@?B?@@BHp@F`@Ht@L`A@?XW@A@A@?@??@?@@D@RJENEXKlA_@xBs@bA]LCRIXIJCNCrDo@REx@QXE|@QRE??b@hDTfBR|ArAfKVxBLh@bA|HDb@N`Ab@hDF`@Hp@BLHr@Jv@x@bGZ~B\\\\pCd@pD\\\\fC^rCVfBFb@F`@x@fGR|Af@nDPvAF`@LbA^rCHn@Lz@n@tEr@nFp@zENdA^xCZ`CLx@PvAT~AHl@PxAHn@ZrB^tCDPXtBFl@RzABRF`@ZbCJr@Hl@Jn@XnBN|@Hd@BJBHDJDJDLHNDDBFBBBBB@zBhCJNNRNZHVJVHXPlAFh@DXFj@BL@L@J@L@J@N?L@N?J@P?Z?d@EtAA\\\\C`BATAT?RALARAJAHALAHCLEXCFAJCHERERGVo@lCu@|Cg@zBWfA[rA[rAg@rBSz@UhASx@M|@O`AIz@Gv@Ex@Cd@GnBCx@@h@@rA?b@Bn@B^f@rDfAtINbAb@~CXjB"), map: map }); var bounds = new google.maps.LatLngBounds(); for (var i = 0; i < polyline.getPath().getLength(); i++) { bounds.extend(polyline.getPath().getAt(i)); } map.fitBounds(bounds); } google.maps.event.addDomListener(window, "load", initialize);

 html, body, #map_canvas { height: 100%; width: 100%; margin: 0px; padding: 0px }

 <script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <div id="map_canvas"></div>