在Querystring中发送googlemap Polygon

时间:2016-07-23 01:45:52

标签: google-maps

我们需要将googlemap多边形作为查询字符串参数发送。我们注意到在Rightmove.co.uk和其他网站等网站上,多边形参数已经过编码。例如,3边多边形被编码为polygon = qntyHnjq%40jhAyv%40k%5CduC。这是将多边形作为查询字符串参数发送的特殊标准。如何将多边形编码为此格式。

非常感谢

1 个答案:

答案 0 :(得分:1)

一种选择是使用Google Maps JavaScript API v3使用的编码算法。

我对这个问题的回答:Directions API overview_polyline doesn't have correct points包含一些指向该算法信息的链接:

https://web.archive.org/web/20131122011459/http://facstaff.unca.edu/mcmcclur/GoogleMaps/EncodePolyline/

使用您提供的编码字符串进行的快速测试会在英国布伦特公园(伦敦西北部)产生一个三角形。

代码段

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var polygonStr = "qntyHnjq%40jhAyv%40k%5CduC";
  var unencodedPolypath = decodeURIComponent(polygonStr);
  console.log(unencodedPolypath);
  var polygon = new google.maps.Polygon({
    map: map,
    path: google.maps.geometry.encoding.decodePath(unencodedPolypath)
  });
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < polygon.getPaths().getAt(0).getLength(); i++) {
    bounds.extend(polygon.getPaths().getAt(0).getAt(i));
  }
  map.fitBounds(bounds);

}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>