修复Google地图多段线的编码字符串 [英] Fixing encoded string for Google Maps polyline

查看：85
本文介绍了修复Google地图多段线的编码字符串的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个编码的字符串，我想用它在谷歌地图上绘制一条线，但由于诸如反斜杠之类的特殊字符，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 [11]〜pLWrLY L_ @〜LWlABtHx @ xOzEjAf @ vCxAlCjBjCfC`CxChFrJfBrEzA`FxG 〜XtEvSlElRZvAXhAtApEDNDHHDLAFSFUFMLMLUDKBO @ OB_ @？Q？YC [GUOg @ I_ @ COUy @ M [MKMG？OEQAOCVPoALsA @ QHa @ JIDSKO

到目前为止我已经尝试过： 

 <！DOCTYPE html> 
< html> 
< head> 
< title>已过滤资料< / title> 
< style type =text / css> 
 html，body {height：100％;保证金：0;填充：0; } 
 #map {height：100％; } 
< / style> 
 
< script type =text / javascript> 
 var map; 
 
函数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 [11]〜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>


解决方案

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



<为此，您可以使用 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 [11]〜pLWrLY L_ @ 〜LWlABtHx @ xOzEjAf @ vCxAlCjBjCfC`CxChFrJfBrEzA`FxG〜XtEvSlElRZvAXhAtApEDNDHHDLAFSFUFMLMLUDKBO @ OB_ @？Q？YC [GUOg @ I_ @ COUy @ M [MKMG？OEQAOCVPoALsA @ QHa @ JIDSKO 
   
 $ b 
将被编码为： 
 
 
  qikrIehwu @ WOKEIAIBGN？RAj @@ ˚F@？RGVO`NOhOSvQSdTUxUUbVUhVCdCEfC {@街@`LCT @ KjDC` @ NPfBl @ nA的\\\dH` @ nFTh @ BdDVPBb @ LNJLNHPLn @ B\\NFNAlB _ @ ^ @ EjAKnAArABjIx FGR @ jG`AtHhAlIrArJxAvKbBhLfBnLdBhLjBxLfB | LnBxLjB`LbBlLdBfL〜@ HKV @ LKN @ vKx @ lK\\ | JD @ dADfO [11 ] pLWrLY〜L_l〜LWlABtHx @ xOzEjAf @ vCxAlCjBjCfC`CxChFrJfBrEzA`FxG〜XtEvSlElRZvAXhAtApEDNDHHDLAFSFUFMLMLKBKB @ OB _ @ Q？YC [GUOg @ I_ @ COUy @ M [MKMG？OEQAOCVPoALsA @ QHa @ JIDSKO 
  
  
 
 
 修改的示例   
 
  var map;函数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 @？RGVONOhOSvQSdTUxUUbVUhVCdCEfC {@ rUe @`LCt @ KjDC` @ NPfBl @ nA\\dH` @ nFTh @ BdDVPBb @ LNJLNHPLn @ B\\\NFNAlB_ @ ^ EjAKnAArABjIx @ FGR @ jG`AtHhAlIrArJxAvKbBhLfBnLdBhLjBxLfB | LnBxLjB`LbBlLdBfL〜@ HKV @ LKN @ vKx @ lK\\ | JD @ dADfO [11]〜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）;}  
 
 <身高：100％;保证金：0; padding：0;}＃map {height：100％;}

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

另外一个例子

var map;函数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（地图）; }

html，body {height：100％;保证金：0;填充：0; } #map {height：100％; }

< script src =https：// maps .googleapis.com /地图/ API / JS库=几何，拉丝>？< /脚本><表> < TR> < td>编码折线：< / td> < td>< textarea id =encodedPolylineclass =encodeBox>< / textarea>< / td> < / TR> < TR> < TD> < p为H. < input type =buttonvalue =Draw Polylineonclick =initMap（）/> < / p为H. < / TD> < / tr>< / table>< div id =map>< / div>


I have an encoded string I want to use to draw a line in google maps, but Javascript can't read the string because of special characters such as the backslash. Unfortunately I don't have much experience with Javascript, and I have no idea how to escape these characters.

Encoded string:

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

What I've tried so far:

<!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>

解决方案

Indeed, in your example encoded_data variable contains some special characters (e.g. \) that need to be escaped.

You could utilize JavaScript String encoding - Online tool for that purpose, in that case the string:

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

will be encoded to:

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

Modified example

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);
}

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

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

Another example

        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);
        }

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

 #map {
    height: 100%;
 }

<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>

这篇关于修复Google地图多段线的编码字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆