谷歌地图api绘制折线与编码点 [英] Google map api drawn polyline with encoded points

问题描述

我是javascript和Google map api中的新成员，因此我已编码像这样的点：yzocFzynhVq} @n} @o} @nzD并尝试用它绘制折线，但我没有找到主题或文档解决我的问题。有几个主题如何解码，但我不需要做那件事。我只需要使用编码点绘制折线。有人可以举个例子吗？ 编码rel =noreferrer> decodePath的几何库文档

这会将您的编码字符串转换为一个google.maps.LatLng对象数组，用于创建折线

工作示例

working code snippet：

function initialize（）{var myLatLng = new google.maps.LatLng（24.886436490787712，-70.2685546875）; var mapOptions = {zoom：13，center：myLatLng，mapTypeId：google.maps.MapTypeId.TERRAIN}; var bermuda三角形; var map = new google.maps.Map（document.getElementById（'map_canvas'），mapOptions）; //构造多边形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.setCenter（bermudaTriangle.getPath（）。getAt（Math.round（bermudaTriangle.getPath（）。getLength（）/ 2）））;} google.maps.event.addDomListener（window，'load'，initialize）;

html，body {height：100％;保证金：0; padding：0;}＃map_canvas {height：100％;} @ media print {html，body {height：auto; } #map_canvas {height：650px; }}

< script src =https：// < / div> p>

I am new in javascript and Google map api, so i have encoded points like this: "yzocFzynhVq}@n}@o}@nzD" and trying to draw polyline with it, I haven't found topics or docs to solve my problem. There are few topics how to decode it, but I don't need to do that thing. I just need to draw polyline using encoded points. Could somebody give me example?

解决方案

See the geometry library documentation for decodePath

That will convert your encoded string into an array of google.maps.LatLng objects that can be used to create a Polyline

Working example

working code snippet:

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"></script>
<div id="map_canvas"></div>

这篇关于谷歌地图api绘制折线与编码点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！