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

使用几何库的decodePath功能解码编码点以用作折线的路径。

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

概念证明小提琴

代码片段：

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

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
}