谷歌地圖：這些網站如何顯示區域邊界

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>