Google 地图编码多段线未显示

Question

我曾经在我的计算机上保存了一个工作 Google 地图 HTML 页面，其中有几年和 100 条用编码折线 (GPolyline.fromEncoded) 显示的轨迹。由于 Google 地图在他们的 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>

Answer 1

发布的代码使用的是已弃用且现已关闭的 Google 地图 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>

Google 地图编码多段线未显示

Google Map Encoded Polylines not displaying

google-maps

api-key

google-maps-api-3

google-polyline