谷歌地图编码折线不显示答案

【问题标题】：Google Map Encoded Polylines not displaying谷歌地图编码折线不显示
【发布时间】：2021-08-24 22:01:08
【问题描述】：

我曾经在我的计算机上保存了一个有效的 Google 地图 HTML 页面，其中显示了几年和 100 条带有编码折线 (GPolyline.fromEncoded) 的轨道。由于谷歌地图在他们的 API 中改变了一些东西，我无法显示任何东西。我已生成密钥，但没有显示任何内容。

我正在使用以下代码，但似乎没有任何效果。我知道如何生成 API 密钥（我有一个来自 Google Map 的简单示例使用我的 API 密钥，但这个简单示例不使用编码的折线）。如果那里有一位专家可以带领我朝着正确的方向前进，那就太好了！谢谢！

<html>
<head>
<title>MAP</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&amp;sensor=false"></script>
 <script type="text/javascript">
      function load()
          {
          var map = new GMap2(document.getElementById("map"));
          map.setCenter(new GLatLng(49.00,-108.10), 3);      
var TACOMA = new GPolyline.fromEncoded({
  color: "#0000ff",
  weight: 4,
  opacity: 0.8,
  points: "ynq`HhymiVrBbDd@Z^CZSzHuL~BqGrAqCr@sBN{@AkAcJRwG\\kIJqNd@eE?yHs@iE}@eFaBy]}Ns_@_Oa@u@SsATuVMqEQiCg@gDaA}C_EgIuA}B{AuDs@uDQaBMwERiFl@uDfBuFdAmCpHgQJk@~CeKLaCCo@YsBYu@g@u@qAy@yAIq@LmIpEiEtBsCfAqG|AeCd@aGt@uSbEoItCwOlGuCr@}Eb@yEQiE}@_A]}BiAcEeDsAyAmRmWeAiA_CgBaCu@kBYiDHsCl@{At@}ChCgX`^wFzGuFlG}DxDcR~RwDjDiFhEibAjr@sDtBiCjAuW|JkEhAuKxBqM|CmR~F_Y~KoDnByDnCgDzCuDfEaU|XqEjFoVfX_EzFkB`DwEvIaKdSgChEoAxAmAdAyBtA}MxGqLtHsCvAqBz@wDbAkGf@mB@}CMuX}C}TmBgf@iAeO{B{EQ{DTcK`BcH|@_Rp@{AEsCJiKzAgEHqESeDi@oCs@yE_AmDG}E\\mEjAqFlD}CzCsM|Q_EfFg@`@cCxAwItGuIdH|EnO",
  levels: "PCBAFD@@CAH@@@DBGACACIBB@EAC@AD@BGBD@AB@E@CB@ICADA@DA@ADACBHCB@EAC@EBDBKACDADA@AEBG@BD@@BDCAGAB@BE@B@BAF@BBAIACAEAACCBEB@CAACEAC@@DBHCDB@D@@AFP",
  zoomFactor: 2, 
  numLevels: 18
});
map.addOverlay(TACOMA);     
map.addControl(new GSmallZoomControl3D(), new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(10,10)));
          map.addControl(new GMapTypeControl());
          map.removeMapType(G_HYBRID_MAP);            
          }
</script>
</head>
<BODY onload="load()">
<div id="map"></div>
<script
    bsrc="https://maps.googleapis.com/maps/api/js?key=[MY-API-KEY-WILL-GO-HERE]&callback=initMap&libraries=&v=weekly&channel=2"
    async
></script>
</BODY>
</html>

【问题讨论】：

在脚本标签中您正在加载 Google Maps JavaScript API v3，但在代码中您正在使用来自 Google Maps JavaScript API v2 的类。 v2 很久以前就被弃用了，这段代码不应该工作。检查文档并使用 v3 重写您的代码。

标签： google-maps google-maps-api-3 api-key google-polyline

【解决方案1】：

发布的代码使用已弃用且现已关闭的 Google Maps Javascript API v2。要转换它，请参阅：Upgrading Your Maps JavaScript API Application from V2 to V3

或查看encoding namespace in the geometry library

const polyline = new google.maps.Polyline({
    path: google.maps.geometry.encoding.decodePath("ynq`HhymiVrBbDd@Z^CZSzHuL~BqGrAqCr@sBN{@AkAcJRwG\\kIJqNd@eE?yHs@iE}@eFaBy]}Ns_@_Oa@u@SsATuVMqEQiCg@gDaA}C_EgIuA}B{AuDs@uDQaBMwERiFl@uDfBuFdAmCpHgQJk@~CeKLaCCo@YsBYu@g@u@qAy@yAIq@LmIpEiEtBsCfAqG|AeCd@aGt@uSbEoItCwOlGuCr@}Eb@yEQiE}@_A]}BiAcEeDsAyAmRmWeAiA_CgBaCu@kBYiDHsCl@{At@}ChCgX`^wFzGuFlG}DxDcR~RwDjDiFhEibAjr@sDtBiCjAuW|JkEhAuKxBqM|CmR~F_Y~KoDnByDnCgDzCuDfEaU|XqEjFoVfX_EzFkB`DwEvIaKdSgChEoAxAmAdAyBtA}MxGqLtHsCvAqBz@wDbAkGf@mB@}CMuX}C}TmBgf@iAeO{B{EQ{DTcK`BcH|@_Rp@{AEsCJiKzAgEHqESeDi@oCs@yE_AmDG}E\\mEjAqFlD}CzCsM|Q_EfFg@`@cCxAwItGuIdH|EnO"),
    strokeColor: "#0000FF",
    strokeOpacity: 0.8,
    strokeWeight: 4,
    map: map
  });

proof of concept fiddle

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 3,
    center: {
      lat: 0,
      lng: -180
    },
    mapTypeId: "terrain",
  });

  const polyline = new google.maps.Polyline({
    path: google.maps.geometry.encoding.decodePath("ynq`HhymiVrBbDd@Z^CZSzHuL~BqGrAqCr@sBN{@AkAcJRwG\\kIJqNd@eE?yHs@iE}@eFaBy]}Ns_@_Oa@u@SsATuVMqEQiCg@gDaA}C_EgIuA}B{AuDs@uDQaBMwERiFl@uDfBuFdAmCpHgQJk@~CeKLaCCo@YsBYu@g@u@qAy@yAIq@LmIpEiEtBsCfAqG|AeCd@aGt@uSbEoItCwOlGuCr@}Eb@yEQiE}@_A]}BiAcEeDsAyAmRmWeAiA_CgBaCu@kBYiDHsCl@{At@}ChCgX`^wFzGuFlG}DxDcR~RwDjDiFhEibAjr@sDtBiCjAuW|JkEhAuKxBqM|CmR~F_Y~KoDnByDnCgDzCuDfEaU|XqEjFoVfX_EzFkB`DwEvIaKdSgChEoAxAmAdAyBtA}MxGqLtHsCvAqBz@wDbAkGf@mB@}CMuX}C}TmBgf@iAeO{B{EQ{DTcK`BcH|@_Rp@{AEsCJiKzAgEHqESeDi@oCs@yE_AmDG}E\\mEjAqFlD}CzCsM|Q_EfFg@`@cCxAwItGuIdH|EnO"),
    strokeColor: "#0000FF",
    strokeOpacity: 0.8,
    strokeWeight: 4,
    map: map
  });
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < polyline.getPath().getLength(); i++) {
    console.log(polyline.getPath().getAt(i).toUrlValue(6));
    bounds.extend(polyline.getPath().getAt(i));
  }
  map.fitBounds(bounds);
}

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

<html>

<head>
  <title>MAP</title>
</head>

<body>
  <div id="map"></div>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=geometry&v=weekly&channel=2" async></script>
</body>

</html>

【讨论】：