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

Question

有很多在SO上的问题，询问如何在谷歌地图中显示区域边界。回答说，除非我们手动指定多边形坐标作为边界，否则无法实现。

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

1. commonfloor.com
2. zenify.in

(Note: 熟悉IT技术的人应该能理解这些内容)

现在Commonfloor有一个区域ID（在其URL中），这意味着它可能在某个数据库中有边界并使用它来绘制多边形。因此，他们可能没有从谷歌获取数据。但是，Zenify正在做一些不同的事情。它的网站从谷歌加载这些png，实际上形成了这些边界，例如这个 - 它是输入位置边界左上部分的示例。我们可以在Chrome开发工具的网络选项卡中看到更多这些文件正在加载。不确定如何在不弄清楚获取区域边界坐标的情况下实现这种边界映射。

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

- Sudhanshu

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>

- Dr.Molle