如何显示编码折线数组？

Question

我想循环遍历编码折线的数组，在地图上显示每条单独的折线。

This question似乎有一个很好的答案，但它对我不起作用。当我在数组中有多个编码折线时，折线都有点偏。

此代码正常运行，但使用Rails进行循环而不是JavaScript：

<script>
  function initialize() {
    var mapOptions = {
      zoom: 13,
      center: new google.maps.LatLng(<%= @city.latitude.to_f %>,<%= @city.longitude.to_f %>),
      mapTypeId: google.maps.MapTypeId.HYBRID
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

    <% @encoded_polylines.each_with_index do |encoded_polyline, index| %>
      var decodedPath<%= index %> = google.maps.geometry.encoding.decodePath('<%= encoded_polyline %>');
      var poly = new google.maps.Polyline({
        path: decodedPath<%= index %>,
        strokeColor: "#663399",
        strokeOpacity: 1.0,
        strokeWeight: 2
      });
      poly.setMap(map);
    <% end %>
  }

  google.maps.event.addDomListener(window, 'load', initialize);
</script>

生成的地图是正确的：

当我尝试在JavaScript中进行循环时，所有编码折线都显示不正确：

<script>
  function initialize() {
    var mapOptions = {
      zoom: 13,
      center: new google.maps.LatLng(<%= @city.latitude.to_f %>,<%= @city.longitude.to_f %>),
      mapTypeId: google.maps.MapTypeId.HYBRID
    };
    var map              = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
    var encodedPolylines = <%= raw @encoded_polylines %>;
    var arrayLength      = encodedPolylines.length;

    for (var i = 0; i < arrayLength; i++) {
      var decodedPath = google.maps.geometry.encoding.decodePath(encodedPolylines[i])
      var poly        = new google.maps.Polyline({
        path: decodedPath,
        strokeColor: "#663399",
        strokeOpacity: 1.0,
        strokeWeight: 2
      });
      poly.setMap(map);
    }
  }

  google.maps.event.addDomListener(window, 'load', initialize);
</script>

生成的地图不正确：

如果我仅使用encodedPolyline通过JavaScript代码发送一个var encodedPolylines = ['<%= raw @encoded_polylines.first %>'];项，则会正确显示该折线。如果我使用encodedPolyline通过JavaScript代码发送了两个var encodedPolylines = <%= raw @encoded_polylines.first(2) %>;项，则会错误地显示折线。

在查看某个值（使用encodedPolyline）或查看其中存在的值时，我发现.first数据没有任何差异阵列。

var encodedPolylines = <%= raw @encoded_polylines.first(2) %>;的结果是：

var encodedPolylines = ["mjr`GlaizLBnDRHe@U@YAa@HWDYBWBYD]DYBYBYBWB]D_@@Y@YD_@H]FYHYTGRAF[?]AYB]C_@?_@Ca@E]EYC_@C]A_@A]E]A]Aa@C]E]AWC[AW@]E_@GY?W?_@CW?_@?WC[Ca@CY?WA_@?]AYC[G]?Y?]C]IU@_@A_@AY@[D[Dc@BYHYFYJUFULSLQLQJUHYHSJQJSLUJUJWHSJYNSHUDYJWNULUFWJUNYHSLYPUHSJ[LWPILSRQJSHWJUFWISMQOQQIOMSKOOSOQMKUOUOMOQOOSQSMMMOKOOSMOMOQOQKQMQQQQOSQOOQQMOQOOMOOOOQOSOOKSQOQOQQOMSSOOOOSSOMOOSOMOMOMMSE]KWQQQOSOSOQOQMQQQOQQ?a@D[F[FYHWHWJ[HWJUJULSNOPIDC", "{jr`GbiizLDBPCRFPBRBRFTFRHTBRDPHRBNDPDPHR?TDPDRBR?RCRCRCTEVAPEVCPETAPCVCRCTERERCPCTCTCPATETEREREPCR?PATAT?R@P?T?T@TBV@V?T@T@RAT@RAT?R@R?TDRBR?T@RBNLLZHRFXDT?ZCZCVEZEXCVGZEVIVGZGTEZEZAVGZGTFTLVCVGXGXGZIVIVITKPMROPMPKTKVOVKRIRITQLMTMPKTKRKRIRKVKVIXETGZCXA\\\\CV?XBZ?\\\\@ZAV?X?\\\\B\\\\@ZCXA^FVLNPDR@R?P@RATAR@T?P@T?V@P@T@P?R@P@P@PBRBPBR?PBRBPDTJTFPHPJRLPLLNNPNPNRLNNNJPNTNPLTNTJRJRFTLNNPNNLVHTNTLTPPNPPRJPLPPRJRPLRRPPPNPLNLLRNJPHNHPLLNRJNLRHRJNJPRLLPNPLNNNRPJPJPJPHPJPFTDRHPHTJRHPFNHTJRHPDRFRFPHRFPJPHNHTJRNRFTHRHRHPHPFPHPFPJPHPFPDPDPFPFPLTHNJPJRHPJPHTFRHPDRHPLRDPHRJRFPDNNRHNJRFTDPDTFPBPDNKB[BYA[C[CYAY?]?_@?[AYC]AYC[CYEWI[IYIYKUKUKWMUKUIUMUOSKYK[G]G[EYG[E]E]EWE[EYGUG[G[IUGYIWGYIWIWMUMQKWMWKUKYKYKUKUIWMYKYIUGWGWKUKYKSKYGUKSMYKWKUKYMUIUGYIWGYG]CWEYCYEYEWA[CY?[AY@]CYE_@E[IYIWEYKWMOOUKWIWMUOSOMSQMMOOQKSEUCQCSGQGQGQMQOSQOKOSSKUKQOOMSOOOSMSSOMMMOQOUOKSKOOOQQOSMOUIUMWKYEWC_@?]AWCWSIS@U@U?S?SBSAQBUBUBWAQDUDS@S@Q?S?SAQ@W?U?U?Q@Q?UGUCU?U?U@SASESAQGQES?YCSCWCQCSASAQ?U@UCSGSCSAS@S?U@UAQ?SASAU?S@U@UAU@WAWAUAQBS@S?QBSBUDSDWDQDUBQBQ?SBQDQDS@UBW@QBSDUBUDSBUDQ@WAUEQAQAQCSKQMSKWGUGUGQCUESGUGQEQEWE??"];

var encodedPolylines = ['<%= raw @encoded_polylines.first %>'];的结果是：

var encodedPolylines = ['mjr`GlaizLBnDRHe@U@YAa@HWDYBWBYD]DYBYBYBWB]D_@@Y@YD_@H]FYHYTGRAF[?]AYB]C_@?_@Ca@E]EYC_@C]A_@A]E]A]Aa@C]E]AWC[AW@]E_@GY?W?_@CW?_@?WC[Ca@CY?WA_@?]AYC[G]?Y?]C]IU@_@A_@AY@[D[Dc@BYHYFYJUFULSLQLQJUHYHSJQJSLUJUJWHSJYNSHUDYJWNULUFWJUNYHSLYPUHSJ[LWPILSRQJSHWJUFWISMQOQQIOMSKOOSOQMKUOUOMOQOOSQSMMMOKOOSMOMOQOQKQMQQQQOSQOOQQMOQOOMOOOOQOSOOKSQOQOQQOMSSOOOOSSOMOOSOMOMOMMSE]KWQQQOSOSOQOQMQQQOQQ?a@D[F[FYHWHWJ[HWJUJULSNOPIDC'];

Answer 1

事实证明，如果我在地图上显示一条编码折线，那么我需要转义反斜杠（我在折线字符串上使用.gsub(/\\/,'\\\\\\')）。

但是，如果我遍历折线数组，我必须不转义反斜杠。

我没有意识到这一点，并在编码所有生成的折线时应用gsub，因为我将encoded_polyline存储在数据库中。

我在没有gsub的情况下重新编码了所有折线，现在地图显示正确。