谷歌地图：这些网站如何显示区域边界

Question

在谷歌地图上有很多问题要求以某种方式显示区域边界。答案说，除非我们手动指定边界为多边形坐标，否则这是不可能的。

如果是这样的话，那么如何在这些网站上展示区域：

1. commonfloor.com
2. zenify.in

现在commonfloor具有区域ID（在其URL），这意味着它可能在某个数据库中有边界并正在使用它来绘制多边形。所以可能是他们没有从谷歌获取数据。但是，zenify正在做一些不同的事情。这是网站从谷歌载入这些PNG实际上形成这些bounadries - 例如。 this - 它是输入位置边界的左上角部分。我们可以看到更多的这些文件正在加载到chrome开发工具的网络选项卡中。如何在不考虑获得区域边界坐标的情况下实现这种边界映射？

另外，如果它是绝对不可能的，这些网站正在使用一些工具来绘制/获取坐标印度地区边界，那些工具是什么？

Answer 1

这两个网站的区域边界都存储了，它们不会从谷歌请求它们。

commonfloor.com使用一个编码的路径建立一个多边形：

function initialize() { 
 
     var mapOptions = { 
 
      zoom: 14, 
 
      center: new google.maps.LatLng(26.4604514, 74.6296585), 
 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
 
     }; 
 
     map = new google.maps.Map(document.getElementById('map_canvas'), 
 
      mapOptions); 
 
      
 
      new google.maps.Polygon({map:map,path:google.maps.geometry.encoding.decodePath('eho`D{unfMx@EzAEx@Gv@GpAIlCMhDSfBI`BKf@CAMCe@ASIqAAYA[OcACSCYAS?M@OBa@HsBDa@@Q?K?ICo@?M?i@Bi@Bs@?G?i@@g@?k@Bk@@[Bg@?YCWCKOQe@a@EEIIMM@MFa@FUDKPk@?]?]Ig@AEQgA[?_@AYGe@Ka@Mm@[kAk@g@l@[XYVu@r@QTz@~B?dEJtAGz@Mp@Wp@?p@RjB_Rv@eCWDkFo@ZiAd@uAd@iAZoAZUFw@LWd@Ar@Ff@r@dAf@x@t@d@|@`@fBnAbA~@f@d@LLdAdAbAnAp@z@PXHPHHHH^J^@')}); 
 
     } 
 

 
     google.maps.event.addDomListener(window, 'load', initialize);

html,body,#map_canvas{height:100%;margin:0;padding:0}

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

zenify.in使用KmlLayer：

 function initialize() { 
 
     var mapOptions = { 
 
      zoom: 14, 
 
      center: new google.maps.LatLng(26.4498954, 74.6399162), 
 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
 
     }; 
 
     map = new google.maps.Map(document.getElementById('map_canvas'), 
 
      mapOptions); 
 
      new google.maps.KmlLayer({map:map,url:"http://www.zenify.in/kml/59.kml?q=v2"}); 
 
      
 
     } 
 

 
     google.maps.event.addDomListener(window, 'load', initialize);

html,body,#map_canvas{height:100%;margin:0;padding:0}

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