谷歌地图API绘制编码点的折线

Question

我刚接触JavaScript和Google地图API，所以我像这样编码点："yzocFzynhVq}@n}@o}@nzD"，并尝试使用它来绘制折线。但是，我没有找到相关主题或文档来解决我的问题。有一些主题介绍如何解码，但我不需要这样做。我只需要使用编码的点来绘制折线。有人可以给我一个例子吗？

- Roman

---

你想要在谷歌地图API中包含geometry库，这样它就能够解码那个编码的折线字符串。 - JasonWyatt

Answer 1

查看几何库文档以获取decodePath的信息。

这将把您的编码字符串转换为一个google.maps.LatLng对象数组，可以用来创建Polyline。

实际示例

工作代码片段：

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>

- geocodezip

---

我能否像Google API v2那样无需解码就创建折线？ - Roman

不是很难，看看我在答案中添加的示例就可以了。 - geocodezip

我也喜欢：https://developers.google.com/maps/documentation/utilities/polylineutility，因为它是一个很好的工具，可以帮助我们理解编码折线的工作原理。 - kaskader