在Google地图中绘制多段线 [英] Plot polyline in Google Maps

问题描述

我正在探索Google Maps Direction API，并注意到我得到了一个 overview_polyline - > points 结果。我可以在此处的编码折线字段中输入该值： https：//开发人员.google.com /地图/文档/公共事业/ polylineutility 。结果似乎是从开始位置到结束位置的实际行车路线。数据看起来很合适。

我希望在Google地图中看到这一点，但在起始位置和结束位置之间没有所有地图标记。如何获取这些信息并将其绘制在Google地图上？

解决方案

从Google Maps JavaScript API开发人员指南：几何库：几何编码

< blockquote>

要解码编码路径，只需调用 decodePath（ ）传递该方法的编码字符串。

注意，要小心反斜线编码（替换编码中的任何出现位置如果您遇到问题，请使用\作为路径字符串）

示例小提琴

代码片段：

  var map; var bounds = new google.maps.LatLngBounds（）; function initialize（）{map = new google.maps.Map （document.getElementById（map_canvas），{center：new google.maps.LatLng（34，108），zoom：13，mapTypeId：google.maps.MapTypeId.ROADMAP}）; var jsonData = {overview_polyline：{points：e`miGhmocNaN〜DiBiNe @ gEkEek @ kNez @ cJqq @ sk @ pGos @ v] _} @ aF_y @ qm @ qDe〜@ w] g〜@ gZ_Jo_ @ m_ @ yNsFgUpMov @〜QebBrJq`BjTsx @瓦特@ kOqbEq_ @ qkCcf @}}德治@ yzCuf @ -O {巴]米〜EtVewAnBa` @ sNmm @} dDufGqwA_ | D_z @克〜CmtBkuOrBmtCyG_yCam @ {`EE]} QKB @ d ucDmDe | AHA @ë}在] {v @的xD}ë@ YF @ aeIm ^ {rEgp @ ahBiZu`BkVueH} gDwuXu`Fi __ @ yZecHgoAgyIl [YBCO ^ sgD_n @ akBaJmeBog @ yyAe` @ AYB〜FifCjNkmAzTwpAgf @ cpFy〜@ {lJsg @ ojHyi @e_Fq} @ o`Dog @} tBoYmz @ y` @ SF @ QF @ ohCkLugBuv @ seAg [UL @ mMowBqc @ IIC} eAcwCqm @ _fBmuAypFyIiqA} BwyBy` @ ogAwt @ ypBezC {dIahBwxJgb @ ytCw〜AwvJkQwu @ {吨@ yrCg { @s {FGB @ ehDzKsdAxO} vAiRmpCwcAorNuwAgdS_r @ imJq [orAk] wrA_TyzAnFefAa\\guB_OmwAwF {tCwMcbDcr @米} _ @} Qo_RgMo | A | d @ kpAne @∪{BRB @ wnDzNkuB_D {v @ eSgf @ w\\ ieAyb @ guCii @ ifCga @ i_Amc @米] urAyoD}ö@ kiIsr @ opQuLkhAc_ @ q`Bq\\} bEeEyi @即}吨@ pHi值| @tBmlBebB {qHq_BinFoWgpBoDuqEob @ķ{ConAedC} L} H +码@ yfAgz @} gAaZi_ @米} @ mcBwyAaj @ _bBg | @csBm_Bo | BkaC {iBqsB_YqyBxEmtBks @ AOB {RgLa〜@ BCCR @ cLyoAemBeg @ GT @_} @ e` @上@ UU @ ETA} vCqp @ ubAklDgeGmxFiqHaqFoeHa [wbBu]} {gAuoDeeG uAooB_uAsy @嗡@ UGA U_L {xSshEe_KieDm | KcfIcuWeUcOwy @ AP {QuUg`BipF {P_L @ klAgaEmjEs} NsvAiyFs} @izFjwAqrGtHkbCeB {cEql @克〜CgSk | @mB} oAqNekEgw @ cmDo_BgjFqqC}的gH}`CwvG} CA {}的cB @ nFowQ_t一个@ efBmpE_oAsvCka @ mwBk_CqbGuu @qfB {uAmrDivDw | E {nAqbDmpCyaJgdCejHk〜@ owAsw @ adAm_ @ ABA} Ven的@ qCou @ cKeiBca @ _cBmlAyjAsn @ _kCk} @smDkVg {BK} @ gcHox @ _sEaPwdC〜KazF {EcpCrEmeGl] auBeEi〜@ yiAovCwwAgsC {I @ oSsbAu〜Ay_AmaBk_ @ iKak @ mh @ _BmBk @ wHvG @ dBvA}}; var path = google.maps.geometry.encoding.decodePath（jsonData.overview_polyline.points）;的console.log（路径）; for（var i = 0; i< path.length; i ++）{bounds.extend（path [i]）; } var polyline = new google.maps.Polyline（{path：path，strokeColor：'＃FF0000'，strokeOpacity：0.8，strokeWeight：2，fillColor：'＃FF0000'，fillOpacity：0.35，map // map strokeColor： ＃0000FF，// strokeOpacity：1.0，// strokeWeight：2}）; polyline.setMap（地图）; map.fitBounds（bounds）;} google.maps.event.addDomListener（window，load，initialize）;  

  html，body，＃map_canvas {height：100％;宽度：100％; margin：0px; < script src =https：//   

I'm exploring Google Maps Direction API and noticed I get an overview_polyline -> points result. I was able to enter that value in the "Encoded Polyline" field here: https://developers.google.com/maps/documentation/utilities/polylineutility. The result seems to be the actual driving directions from start location to end location. The data looks right to me.

I'd like to see this in a Google Map, but without all the map markers in between the start and end locations. How do I take this information and plot it on Google Maps?

解决方案

From the Google Maps Javascript API Developers Guide: Geometry Library: Geometry Encoding

To decode an encoded path, simply call decodePath() passing the method the encoded string.

The caveat, is beware of backslash encoding (replace any occurrences in your encoded path string of "\\" with "\" if you have problems)

example fiddle

code snippet:

var map;
var bounds = new google.maps.LatLngBounds();

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(34, 108),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

  var jsonData = {
    "overview_polyline": {
      "points": "e`miGhmocNaN~DiBiNe@gEkEek@kNez@cJqq@sk@pGos@v]_}@aF_y@qm@qDe~@w]g~@gZ_Jo_@m_@yNsFgUpMov@~QebBrJq`BjTsx@w@kOqbEq_@qkCcf@}}Dej@yzCuf@o{Ba]m~EtVewAnBa`@sNmm@}dDufGqwA_|D_z@g~CmtBkuOrBmtCyG_yCam@{`Ee]qkB}d@ucDmDe|Aha@e}At]{v@xD}e@yf@aeIm^{rEgp@ahBiZu`BkVueH}gDwuXu`Fi__@yZecHgoAgyIl[ybCo^sgD_n@akBaJmeBog@yyAe`@ayB~FifCjNkmAzTwpAgf@cpFy~@{lJsg@ojHyi@e_Fq}@o`Dog@}tBoYmz@y`@sf@qf@ohCkLugBuv@seAg[ul@mMowBqc@iiC}eAcwCqm@_fBmuAypFyIiqA}BwyBy`@ogAwt@ypBezC{dIahBwxJgb@ytCw~AwvJkQwu@{t@yrCg{@s{Fgb@ehDzKsdAxO}vAiRmpCwcAorNuwAgdS_r@imJq[orAk]wrA_TyzAnFefAa\\guB_OmwAwF{tCwMcbDcr@m}_@}Qo_RgMo|A|d@kpAne@u{Brb@wnDzNkuB_D{v@eSgf@w\\ieAyb@guCii@ifCga@i_Amc@m]urAyoD}o@kiIsr@opQuLkhAc_@q`Bq\\}bEeEyi@iE}t@pHi|@tBmlBebB{qHq_BinFoWgpBoDuqEob@k{ConAedC}L}h@yd@yfAgz@}gAaZi_@m}@mcBwyAaj@_bBg|@csBm_Bo|BkaC{iBqsB_YqyBxEmtBks@aoB{RgLa~@bCcr@cLyoAemBeg@gt@_}@e`@on@uu@etA}vCqp@ubAklDgeGmxFiqHaqFoeHa[wbBu]}gAuoDeeG{uAooB_uAsy@om@ugAu_L{xSshEe_KieDm|KcfIcuWeUcOwy@aP{QuUg`BipF{P_l@klAgaEmjEs}NsvAiyFs}@izFjwAqrGtHkbCeB{cEql@g~CgSk|@mB}oAqNekEgw@cmDo_BgjFqqC}gH}`CwvG}cA{cB}nFowQ_t@an@efBmpE_oAsvCka@mwBk_CqbGuu@qfB{uAmrDivDw|E{nAqbDmpCyaJgdCejHk~@owAsw@adAm_@abA}Ven@qCou@cKeiBca@_cBmlAyjAsn@_kCk}@smDkVg{Bk}@gcHox@_sEaPwdC~KazF{EcpCrEmeGl]auBeEi~@yiAovCwwAgsC{i@oSsbAu~Ay_AmaBk_@iKak@mh@_BmBk@wHvG@dBvA"
    }
  };
  var path = google.maps.geometry.encoding.decodePath(jsonData.overview_polyline.points);
  console.log(path);
  for (var i = 0; i < path.length; i++) {
    bounds.extend(path[i]);
  }

  var polyline = new google.maps.Polyline({
    path: path,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map
      // strokeColor: "#0000FF",
      // strokeOpacity: 1.0,
      // strokeWeight: 2
  });
  polyline.setMap(map);
  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"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>

这篇关于在Google地图中绘制多段线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！