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

时间:2016-03-06 15:14:08

标签: google-maps google-maps-api-3

有很多关于SO的问题要求在谷歌地图中显示区域边界。答案说除非我们手动将边界指定为多边形坐标,否则不可能。

如果是这种情况,那么这些网站如何显示区域:

  1. commonfloor.com
  2. zenify.in
  3. 现在,commonfloor有一个区域id(在其url中),这意味着它可能在某个地方的数据库中具有边界并且正在使用它来绘制多边形。所以可能他们没有从谷歌获取数据。但是,zenify正在做一些与众不同的事情。它的网站从谷歌加载这些pngs实际上形成了那些bounadries - 例如。 this - 它是输入位置边界的左上角部分。我们可以在chrome开发工具的网络选项卡中看到更多这些文件被加载。如何在不弄清楚获得区域边界坐标的方法的情况下实现这种边界映射究竟是什么?

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

1 个答案:

答案 0 :(得分:4)

存储了两个网站中区域的边界,他们不会从谷歌请求它们。

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>
&#13;
&#13;
&#13;

zenify.in 使用KmlLayer:

&#13;
&#13;
      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);
&#13;
html,body,#map_canvas{height:100%;margin:0;padding:0}
&#13;
<div id="map_canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry"></script>
&#13;
&#13;
&#13;

相关问题