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

【问题标题】：Google Maps: How do these websites show region boundaries谷歌地图：这些网站如何显示区域边界
【发布时间】：2016-03-06 15:14:08
【问题描述】：

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

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

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

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

【问题讨论】：

标签： google-maps google-maps-api-3

【解决方案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>

【讨论】：