google-maps - 谷歌地图 : How do these websites show region boundaries

Question

有很多关于 SO 的问题询问如何在谷歌地图中显示区域边界。答案说这是不可能的，除非我们手动将边界指定为多边形坐标。

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

1. commonfloor.com
2. zenify.in

现在 commonfloor 有一个区域 ID(在它的 url 中)，这意味着它可能在某个数据库中有边界，并用它来绘制多边形。所以可能他们没有从谷歌获取数据。但是，zenify 正在做一些不同的事情。它的网站从谷歌加载这些 png，它们实际上形成了这些边界——例如。 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>