Question

我有一个编码字符串，我想用它在谷歌地图中绘制一条线，但是由于特殊字符（如反斜杠），Javascript无法读取字符串。不幸的是，我没有多少Javascript经验，我也不知道如何逃避这些角色。

编码字符串：

qikrIehwu@WOKEIAIBGN?RAj@@f@?RGVO`NOhOSvQSdTUxUUbVUhVCdCEfC{@rUe@`LCt@KjDC`@NPfBl@nA\dH`@nFTh@BdDVPBb@LNJLNHPLn@B\NFNAlB_@^EjAKnAArABjIx@fGr@jG`AtHhAlIrArJxAvKbBhLfBnLdBhLjBxLfB|LnBxLjB`LbBlLdBfL~@hKv@lKn@vKx@lK\|Jd@dADfO[lL]pLWrLY~L_@~LWlABtHx@xOzEjAf@vCxAlCjBjCfC`CxChFrJfBrEzA`FxG~XtEvSlElRZvAXhAtApEDNDHHDLAFSFUFMLMLUDKBO@OB_@?Q?YC[GUOg@I_@COUy@M[MKMG?OEQAOCVPoALsA@QHa@JIDSKO

到目前为止我已尝试过：

<!DOCTYPE html>
<html>
  <head>
    <title>Filtered Data</title>
    <style type="text/css">
      html, body { height: 100%; margin: 0; padding: 0; }
      #map { height: 100%; }
    </style>

    <script type="text/javascript">
      var map;

      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: { lat: 55.570, lng: 9.000 },
          zoom: 13
        });

        RegExp.escape = function(s) {
          return s.replace(/\\/g, '&#92;');
        };

        var encoded_data = RegExp.escape("qikrIehwu@WOKEIAIBGN?RAj@@f@?RGVO`NOhOSvQSdTUxUUbVUhVCdCEfC{@rUe@`LCt@KjDC`@NPfBl@nA\dH`@nFTh@BdDVPBb@LNJLNHPLn@B\NFNAlB_@^EjAKnAArABjIx@fGr@jG`AtHhAlIrArJxAvKbBhLfBnLdBhLjBxLfB|LnBxLjB`LbBlLdBfL~@hKv@lKn@vKx@lK\|Jd@dADfO[lL]pLWrLY~L_@~LWlABtHx@xOzEjAf@vCxAlCjBjCfC`CxChFrJfBrEzA`FxG~XtEvSlElRZvAXhAtApEDNDHHDLAFSFUFMLMLUDKBO@OB_@?Q?YC[GUOg@I_@COUy@M[MKMG?OEQAOCVPoALsA@QHa@JIDSKO");
        var decode = google.maps.geometry.encoding.decodePath(encoded_data);

        var line = new google.maps.Polyline({
          path: decode,
          strokeColor: '#00008B',
          strokeOpacity: 1.0,
          strokeWeight: 4,
          zIndex: 3
        });

        line.setMap(map);
      }
    </script>
  </head>
  <body>
    <div id="map"></div>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing&callback=initMap">
    </script>
  </body>
</html>

Answer 1

我发现编码的Polyline没有问题。没有必要逃避任何事情。只需将字符串括在简单的'或双"引号内即可。

function initialize() {

    var map = new google.maps.Map(document.getElementById('map-canvas'), {
        center: {
            lat: 55.570,
            lng: 9.000
        },
        zoom: 10
    });

    var encoded_data = 'qikrIehwu@WOKEIAIBGN?RAj@@f@?RGVO`NOhOSvQSdTUxUUbVUhVCdCEfC{@rUe@`LCt@KjDC`@NPfBl@nA\dH`@nFTh@BdDVPBb@LNJLNHPLn@B\NFNAlB_@^EjAKnAArABjIx@fGr@jG`AtHhAlIrArJxAvKbBhLfBnLdBhLjBxLfB|LnBxLjB`LbBlLdBfL~@hKv@lKn@vKx@lK\|Jd@dADfO[lL]pLWrLY~L_@~LWlABtHx@xOzEjAf@vCxAlCjBjCfC`CxChFrJfBrEzA`FxG~XtEvSlElRZvAXhAtApEDNDHHDLAFSFUFMLMLUDKBO@OB_@?Q?YC[GUOg@I_@COUy@M[MKMG?OEQAOCVPoALsA@QHa@JIDSKO';

    var decode = google.maps.geometry.encoding.decodePath(encoded_data);

    var line = new google.maps.Polyline({
        path: decode,
        strokeColor: '#00008B',
        strokeOpacity: 1.0,
        strokeWeight: 4,
        zIndex: 3
    });

    line.setMap(map);
}

initialize();

概念证明小提琴：

JSFiddle demo

Answer 2

的确，在您的示例encoded_data变量中包含一些需要转义的特殊字符（例如\）。

您可以将JavaScript String encoding - Online tool用于此目的，在这种情况下是字符串：

qikrIehwu@WOKEIAIBGN?RAj@@f@?RGVO`NOhOSvQSdTUxUUbVUhVCdCEfC{@rUe@`LCt@KjDC`@NPfBl@nA\dH`@nFTh@BdDVPBb@LNJLNHPLn@B\NFNAlB_@^EjAKnAArABjIx@fGr@jG`AtHhAlIrArJxAvKbBhLfBnLdBhLjBxLfB|LnBxLjB`LbBlLdBfL~@hKv@lKn@vKx@lK\|Jd@dADfO[lL]pLWrLY~L_@~LWlABtHx@xOzEjAf@vCxAlCjBjCfC`CxChFrJfBrEzA`FxG~XtEvSlElRZvAXhAtApEDNDHHDLAFSFUFMLMLUDKBO@OB_@?Q?YC[GUOg@I_@COUy@M[MKMG?OEQAOCVPoALsA@QHa@JIDSKO

将编码为：

qikrIehwu@WOKEIAIBGN?RAj@@f@?RGVO`NOhOSvQSdTUxUUbVUhVCdCEfC{@rUe@`LCt@KjDC`@NPfBl@nA\\dH`@nFTh@BdDVPBb@LNJLNHPLn@B\\NFNAlB_@^EjAKnAArABjIx@fGr@jG`AtHhAlIrArJxAvKbBhLfBnLdBhLjBxLfB|LnBxLjB`LbBlLdBfL~@hKv@lKn@vKx@lK\\|Jd@dADfO[lL]pLWrLY~L_@~LWlABtHx@xOzEjAf@vCxAlCjBjCfC`CxChFrJfBrEzA`FxG~XtEvSlElRZvAXhAtApEDNDHHDLAFSFUFMLMLUDKBO@OB_@?Q?YC[GUOg@I_@COUy@M[MKMG?OEQAOCVPoALsA@QHa@JIDSKO

修改后的示例

＆＃13;

var map;

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: 55.570, lng: 9.000 },
        zoom: 11
    });

    var encoded_data = "qikrIehwu@WOKEIAIBGN?RAj@@f@?RGVO`NOhOSvQSdTUxUUbVUhVCdCEfC{@rUe@`LCt@KjDC`@NPfBl@nA\\dH`@nFTh@BdDVPBb@LNJLNHPLn@B\\NFNAlB_@^EjAKnAArABjIx@fGr@jG`AtHhAlIrArJxAvKbBhLfBnLdBhLjBxLfB|LnBxLjB`LbBlLdBfL~@hKv@lKn@vKx@lK\\|Jd@dADfO[lL]pLWrLY~L_@~LWlABtHx@xOzEjAf@vCxAlCjBjCfC`CxChFrJfBrEzA`FxG~XtEvSlElRZvAXhAtApEDNDHHDLAFSFUFMLMLUDKBO@OB_@?Q?YC[GUOg@I_@COUy@M[MKMG?OEQAOCVPoALsA@QHa@JIDSKO";
    var decode = google.maps.geometry.encoding.decodePath(encoded_data);

    var line = new google.maps.Polyline({
        path: decode,
        strokeColor: '#00008B',
        strokeOpacity: 1.0,
        strokeWeight: 4,
        zIndex: 3
    });

    line.setMap(map);
}

＆＃13;

html, body {
     height: 100%;
     margin: 0;
     padding: 0;
}
#map {
    height: 100%;
}

＆＃13;

<div id="map"></div>
<script async defer
            src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing&callback=initMap">
</script>

＆＃13;

另一个例子

＆＃13;

        var map;

        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                center: { lat: 55.570, lng: 9.000 },
                zoom: 13
            });

            var encoded_data = document.getElementById('encodedPolyline').value;
            
            var decode = google.maps.geometry.encoding.decodePath(encoded_data);

            var line = new google.maps.Polyline({
                path: decode,
                strokeColor: '#00008B',
                strokeOpacity: 1.0,
                strokeWeight: 4,
                zIndex: 3
            });

            line.setMap(map);
        }

＆＃13;

 html, body {
    height: 100%;
    margin: 0;
    padding: 0;
 }

 #map {
    height: 100%;
 }

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing"></script>
<table>
            <tr>
                <td>Encoded Polyline:</td>
                <td><textarea id="encodedPolyline" class="encodeBox"></textarea></td>
            </tr>
            <tr>
                <td>
                    <p>
                        <input type="button" value="Draw Polyline" onclick="initMap()" />
                    </p>
                </td>
            </tr>
</table>
<div id="map"></div>

＆＃13;

修复Google地图折线的编码字符串

2 个答案: