Google Maps API：使用折线点绘制路线

Question

我正在使用谷歌路线来获取两点之间的主要路线及其替代方案 (3)，因此每个替代方案都包含步骤以及所有步骤的总折线结果，因此我想在地图中绘制这 3 条折线以看看主要路线和备选路线，你知道怎么做吗？

这是总览折线之一

"overview_polyline": {
    "points": "uiyqBfb~zQgGwAgCtM}DfVpDrBeBbFqDjFmHfXkOzh@cKxNuGlW_BzSiJxZcBfHuS~NqK`Ia@lFgIpC{fAoDcW~BmEbBeqAmIaEoBgB{KB}J}OoJcBwAeHuAwDaBkCnCwKjLcNgBkIc@oDtD}EhG{GjAgVcDsN{Bm@|FaAvOiE|Va`@xw@}Jh]dPhcArEzQuIpXkMna@sDbPb@fGdDxE|O~E~ZzH`ThQtdA|jA|NfRxC~Jc@p[iEd`@WbSvKza@rTlf@~ArMfFtJrChOjQfM~JzX@~VnOn]g@jMcBdLkGzHg@|DyGfEcEjLgEvHaKoAgNiEoLsCoKUkUz@_CtBqI?eDhAeGeDsIRyK`IqIfIkPtEuUbNcLpOuPpZ]rHpHtQpLnOlEvIEpJfId[pShc@z@th@cLx@yNnGk`@rVsLfLm|@v|@_VxKgZ`XmR~VeH~^~@jIsAvLeD~LiCre@mGhP}Eda@D`YqBt[aIna@iI|Db@pENpDtAzCc@pG{@bFuQlGcLxGuUz@}PhBUhIcD`Eof@rMwUfEk^|Ck}@tFcMjDiP~GeN`RcF]}CxBmEc@{BvAoGdCsKpFmOgEuB\\eEjKjB~GwGvBiDsDgEyGwD`JeDTgCyGuCOcGvFmGzJeC_DwCa@WvM{@rC_CJuHoIiFEgBwC{HeJuCm@sAxAf@fFoBvBmDx@iNm@mCxD{DkAwMrDcJrF}IhSsDbB{D{AyY_CoK~AuP`@uPm@eKbC}Lq@eNsCeDeC_Jj@wIb@mEr@eHgBiGoKiGyJeDgI}CmHG{KiCyO}P}IgNkNaUoKkCkDYiB{Bg@sFwAaDeDsSwT}PY{KaEeIBqTfEiEeEgDkLyUyIkT}BoP{DyGiGwHiW{Is^kOiScLmTeIqGsPcTqD_FgMaDwNqMwOuVqHy\\yFkMmGwEaHeAqBmCr@aU_CiBoSpDyHBkH}Kc[kTq[mPyYiOyVyR_Sc\\{ZsRwfA{]wh@oPaNVyIiFeHKmE~AqAhEwNgDiNmFgL~H}Cs@oIxH{DRsFqG_FoA}GfEgP~MuFi@}Sh@yDdDgInBaGh@w[cCwH~AeGeFeLcUD_LkAiDwUaJuMXaQuGyBgB|LkLhL{JnPoGhIuQfACz@kEqCgBF}F~@qL{AaHa@qJCcHiAsBeH]{PiHeJoCu@{BxCwC[cFiVePaGt@}KoH_NyMyNiGyWwMeIgFiLmIod@lEoSaf@eIrF{@oG}C_@{B{CsEmAmDgCcAoL_AaFs@oCl@mD\\eMkHkFaJqFkEiPN}HrBvKdEzExA|FJJ"
  },

Answer 1

使用geometry library 的decodePath 函数对编码点进行解码，以用作折线的路径。

  var polyline = new google.maps.Polyline({
    path: google.maps.geometry.encoding.decodePath(json.overview_polyline.points),
    map: map
  });

proof of concept fiddle

代码 sn-p：

var json = {
  "overview_polyline": {
    "points": "uiyqBfb~zQgGwAgCtM}DfVpDrBeBbFqDjFmHfXkOzh@cKxNuGlW_BzSiJxZcBfHuS~NqK`Ia@lFgIpC{fAoDcW~BmEbBeqAmIaEoBgB{KB}J}OoJcBwAeHuAwDaBkCnCwKjLcNgBkIc@oDtD}EhG{GjAgVcDsN{Bm@|FaAvOiE|Va`@xw@}Jh]dPhcArEzQuIpXkMna@sDbPb@fGdDxE|O~E~ZzH`ThQtdA|jA|NfRxC~Jc@p[iEd`@WbSvKza@rTlf@~ArMfFtJrChOjQfM~JzX@~VnOn]g@jMcBdLkGzHg@|DyGfEcEjLgEvHaKoAgNiEoLsCoKUkUz@_CtBqI?eDhAeGeDsIRyK`IqIfIkPtEuUbNcLpOuPpZ]rHpHtQpLnOlEvIEpJfId[pShc@z@th@cLx@yNnGk`@rVsLfLm|@v|@_VxKgZ`XmR~VeH~^~@jIsAvLeD~LiCre@mGhP}Eda@D`YqBt[aIna@iI|Db@pENpDtAzCc@pG{@bFuQlGcLxGuUz@}PhBUhIcD`Eof@rMwUfEk^|Ck}@tFcMjDiP~GeN`RcF]}CxBmEc@{BvAoGdCsKpFmOgEuB\\eEjKjB~GwGvBiDsDgEyGwD`JeDTgCyGuCOcGvFmGzJeC_DwCa@WvM{@rC_CJuHoIiFEgBwC{HeJuCm@sAxAf@fFoBvBmDx@iNm@mCxD{DkAwMrDcJrF}IhSsDbB{D{AyY_CoK~AuP`@uPm@eKbC}Lq@eNsCeDeC_Jj@wIb@mEr@eHgBiGoKiGyJeDgI}CmHG{KiCyO}P}IgNkNaUoKkCkDYiB{Bg@sFwAaDeDsSwT}PY{KaEeIBqTfEiEeEgDkLyUyIkT}BoP{DyGiGwHiW{Is^kOiScLmTeIqGsPcTqD_FgMaDwNqMwOuVqHy\\yFkMmGwEaHeAqBmCr@aU_CiBoSpDyHBkH}Kc[kTq[mPyYiOyVyR_Sc\\{ZsRwfA{]wh@oPaNVyIiFeHKmE~AqAhEwNgDiNmFgL~H}Cs@oIxH{DRsFqG_FoA}GfEgP~MuFi@}Sh@yDdDgInBaGh@w[cCwH~AeGeFeLcUD_LkAiDwUaJuMXaQuGyBgB|LkLhL{JnPoGhIuQfACz@kEqCgBF}F~@qL{AaHa@qJCcHiAsBeH]{PiHeJoCu@{BxCwC[cFiVePaGt@}KoH_NyMyNiGyWwMeIgFiLmIod@lEoSaf@eIrF{@oG}C_@{B{CsEmAmDgCcAoL_AaFs@oCl@mD\\eMkHkFaJqFkEiPN}HrBvKdEzExA|FJJ"
  }
};

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(json.overview_polyline.points),
    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>

Answer 2

你应该声明你的路径，然后像这样声明折线：

  var flightPlanCoordinates = [
    {lat: 37.772, lng: -122.214},
    {lat: 21.291, lng: -157.821},
    {lat: -18.142, lng: 178.431},
    {lat: -27.467, lng: 153.027}
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });