谷歌地图编码字符串显示不正确

Question

重写问题以使其对其他人有用： 在使用 google maps api encodePoly 对我上传到数据库的折线进行编码后。当我下载、解码和显示时，它显示不正确。

Picture attached

我学到的是，我需要在对路径进行编码之后以及在发送到 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 directions api overview polyline not working
• Fixing encoded string for Google Maps polyline
• Google Maps Encode Polyline Rendering Wrong

编码折线中的\ 字符需要转义（加上另一个\，使它们成为\\）

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"

代码 sn-p：

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>