带有编码点的谷歌地图 api 绘制的折线答案

【问题标题】：Google map api drawn polyline with encoded points带有编码点的谷歌地图 api 绘制的折线
【发布时间】：2012-10-18 18:58:30
【问题描述】：

我是 javascript 和谷歌地图 api 的新手，所以我对这样的点进行了编码：“yzocFzynhVq}@n}@o}@nzD”并尝试用它绘制折线，我还没有找到主题或文档解决我的问题。如何解码它的主题很少，但我不需要做那件事。我只需要使用编码点绘制折线。有人能给我举个例子吗？

【问题讨论】：

您希望在 google maps API 中包含 geometry 库，它将能够解码该编码的折线字符串。

标签： javascript html google-maps-api-3

【解决方案1】：

见geometry library documentation for decodePath

这会将您的编码字符串转换为可用于创建 Polyline 的 google.maps.LatLng 对象数组

Working example

工作代码sn-p：

function initialize() {
  var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875);
  var mapOptions = {
    zoom: 13,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var bermudaTriangle;

  var map = new google.maps.Map(document.getElementById('map_canvas'),
    mapOptions);


  // Construct the polygon
  bermudaTriangle = new google.maps.Polygon({
    paths: google.maps.geometry.encoding.decodePath("yzocFzynhVq}@n}@o}@nzD"),
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });

  bermudaTriangle.setMap(map);
  map.setCenter(bermudaTriangle.getPath().getAt(Math.round(bermudaTriangle.getPath().getLength() / 2)));
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map_canvas {
  height: 100%;
}
@media print {
  html,
  body {
    height: auto;
  }
  #map_canvas {
    height: 650px;
  }
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>

【讨论】：

我可以像在 google api v2 中那样在不解码的情况下创建折线吗？
没有。但这并不难，请参阅我添加到答案中的示例。
我也喜欢：developers.google.com/maps/documentation/utilities/…，因为它是了解编码折线如何工作的好工具。