问题：

如何在google maps api中找出区域

鄢承运

2023-03-14

我在做地图应用，我需要找出地图的面积，最小纬度，最大纬度，最小经度，最大经度。但我不确定这是不是正确的方法我在这里搞混了，

谷歌地图添加事件监听器缩放的基础我需要得到地图的面积和MIN，MAX（纬度，经度），使用这个值我可以找到正确的多边形在数据库和显示的多边形的正确结果基于区域缩放水平，MIN，MAX（纬度，经度）。

任何人都可以建议这是正确的方法，或者我需要改变我的代码

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry,places&sensor=true"></script>
    <script>
    function initialize() {
       alert("ok");
        var mapOptions = {
            zoom: 14,
            center: new google.maps.LatLng(24.4799425,73.0934957),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById('map-canvas'),  mapOptions);
        var arr = new Array();
        var polygons = [];
        var bounds = new google.maps.LatLngBounds();
        var coordinates = [];
        var marker = new google.maps.Marker;
        var getBounds;

        // downloadUrl("subdivision-coordinates.php", function(data) {
            //var xmlString = $('#xml_values').val();
            var xmlString ="<subdivisions><subdivision name='Madivala'><coord lat='12.920496072962534' lng='77.6198673248291' id='6' /><coord lat='12.92409332232521' lng='77.62896537780762' id='6' /><coord lat='12.927439554274295' lng='77.6209831237793' id='6' /><coord lat='12.923340413955895' lng='77.61634826660156' id='6' /><coord lat='12.92066338803538' lng='77.61960983276367' id='6' /></subdivision><subdivision name='Sarjapur'><coord lat='12.91706608927013' lng='77.62372970581055' id='7' /><coord lat='12.9158948645401' lng='77.6389217376709' id='7' /><coord lat='12.919659495917085' lng='77.64299869537354' id='7' /><coord lat='12.92409332232521' lng='77.64793395996094' id='7' /><coord lat='12.92480440036714' lng='77.63424396514893' id='7' /><coord lat='12.920998017844783' lng='77.62089729309082' id='7' /></subdivision><subdivision name='Domulur'><coord lat='12.967758119178917' lng='77.63282775878906' id='8' /><coord lat='12.962237705403682' lng='77.65179634094238' id='8' /><coord lat='12.950025446093244' lng='77.64226913452148' id='8' /><coord lat='12.963826927981351' lng='77.6308536529541' id='8' /><coord lat='12.967507193936736' lng='77.63299942016602' id='8' /></subdivision><subdivision name='Indira Nagar'><coord lat='12.982227713276773' lng='77.63505935668945' id='9' /><coord lat='12.985154985380868' lng='77.64518737792969' id='9' /><coord lat='12.965834352522322' lng='77.64904975891113' id='9' /><coord lat='12.965834352522322' lng='77.63694763183594' id='9' /><coord lat='12.982060439543622' lng='77.63497352600098' id='9' /></subdivision><subdivision name='Mariyapan Palya'><coord lat='12.97846402705198' lng='77.54322052001953' id='10' /><coord lat='12.9792167688559' lng='77.56536483764648' id='10' /><coord lat='12.95671716919877' lng='77.56914138793945' id='10' /><coord lat='12.956298941771568' lng='77.54373550415039' id='10' /></subdivision></subdivisions>";
            var xml = xmlParse(xmlString);
            var subdivision = xml.getElementsByTagName("subdivision");
            for (var i = 0; i < subdivision.length; i++) {
                arr = [];
                var coordinates = xml.documentElement.getElementsByTagName("subdivision")[i].getElementsByTagName("coord");
                //console.log("coordinates="+xml.documentElement.getElementsByTagName("subdivision")[i].getElementsByTagName("coord"));


                for (var j=0; j < coordinates.length; j++) {
                  arr.push(new google.maps.LatLng(
                        parseFloat(coordinates[j].getAttribute("lat")),
                        parseFloat(coordinates[j].getAttribute("lng"))
                  ));

                  var idd=coordinates[j].getAttribute("id");  
                  bounds.extend(arr[arr.length-1]);

                }

                polygons.push(new google.maps.Polygon({
                    id: idd,
                    paths: arr,
                    strokeColor: '#BA55D3',
                    strokeOpacity: 0.8,
                    strokeWeight: 2,
                    fillColor: '#DA70D6',
                    fillOpacity: 0.35
                }));
                polygons[polygons.length-1].setMap(map);

                polygons[polygons.length-1].addListener('click', function (event) {
                    //alert(this.id);
                      var service_name=$('input[name="map_service"]:checked').val();
                      $('#add_to_qh').val(this.id);
                      $('#loc_edit_page').attr('href',"locality_service_edit.php?geoId="+this.id+"&service="+service_name);
                      $("#myModal").modal();
                });
                polygons[polygons.length-1].addListener('rightclick', function (event) {

                    console.log("Need to delete the clicked polygon");
                });


            }

      map.fitBounds(bounds);

              google.maps.event.addListener(map, 'idle', function() {
                zoomLevel = map.getZoom();
                  center=map.getCenter();

                  var bounds1 = map.getBounds();

                  var min_lat = bounds1.getSouthWest().lat();
                  var min_lng = bounds1.getSouthWest().lng();

                  var max_lat = bounds1.getNorthEast().lat();
                  var max_lng = bounds1.getNorthEast().lng();

                  var nw = new google.maps.LatLng(min_lat, max_lng);
                  var se = new google.maps.LatLng(max_lat, min_lng);

                  var area22=google.maps.geometry.spherical.computeArea([bounds1.getNorthEast(),se, bounds1.getSouthWest(), nw]);
                  //Area chage meter2 to meter 
                  area22 = area22/1000000;


                  var min_area = area22-((area22*20)/100);
                  var max_area = area22+((area22*20)/100);

                  $('#area').val(area22);

                  $('#min_area').val(min_area);
                  $('#max_area').val(max_area);

                  $('#min_lat').val(min_lat);
                  $('#max_lat').val(max_lat);
                  $('#min_lng').val(min_lng);
                  $('#max_lng').val(max_lng);

                  //console.log("Zoommmmmm   my area="+area+" Min Area="+min_area+ " Max Area="+max_area);
               });


    }

    function xmlParse(str) {
      if (typeof ActiveXObject != 'undefined' && typeof GetObject != 'undefined') {
        var doc = new ActiveXObject('Microsoft.XMLDOM');
        doc.loadXML(str);
        return doc;
      }

      if (typeof DOMParser != 'undefined') {
        return (new DOMParser()).parseFromString(str, 'text/xml');
      }

      return createElement('div', null);
    }

    $(function(){
    initialize();
    });

    </script>
    <div id="map-canvas" style="height:620px;" ></div>    
    <input type="text" id="hidden" name="min_area" /> 
    <input type="text" id="hidden" name="max_area" /> 
    Area : <input type="text" id="area" name="area" /> 
    Min Lat : <input type="text" id="min_lat" name="min_lat" /> 
    Max Lat : <input type="text" id="max_lat" name="max_lat" /> 
    Min Lng : <input type="text" id="min_lng" name="min_lng" /> 
    Max Lng : <input type="text" id="max_lng" name="max_lng" />

共有1个答案

戚奇略

2023-03-14

你可以很容易地找到区域。在计算面积之前，请确保已加载映射。

您所需要做的就是获得地图边界，然后提取（并正确使用）角点的坐标。

var bounds = map.getBounds();
var ne = bounds.getNorthEast(); // LatLng of the north-east corner
var sw = bounds.getSouthWest(); // LatLng of the south-west corder

你可以从上面的两个角落得到西北角和东南角：

var nw = new google.maps.LatLng(ne.lat(), sw.lng());
var se = new google.maps.LatLng(sw.lat(), ne.lng());

function getDistanceInMeters(location1, location2) {
    var lat1 = location1.lat();
    var lon1 = location1.lng();

    var lat2 = location2.lat();
    var lon2 = location2.lng();

    var R = 6371; // Radius of the earth in km
    var dLat = deg2rad(lat2 - lat1);
    var dLon = deg2rad(lon2 - lon1);
    var a =
      Math.sin(dLat / 2) * Math.sin(dLat / 2) +
      Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *
      Math.sin(dLon / 2) * Math.sin(dLon / 2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    var d = R * c; // Distance in km
    return (d * 1000);

    function deg2rad(deg) {
        return deg * (Math.PI / 180);
    }
}

var length = getDistanceInMeters(sw, nw);
var breadth = getDistanceInMeters(sw, se);

var area = length * breadth; // in square meters

参考来源：从当前缩放的google地图获取边界、经度和纬度

类似资料：

如何找出Linux硬盘上的坏扇区

本文向大家介绍如何找出Linux硬盘上的坏扇区，包括了如何找出Linux硬盘上的坏扇区的使用技巧和注意事项，需要的朋友参考一下 Badblocks是一个Linux实用程序，用于评估磁盘电源上不正常的扇区。它创建了可以与其他应用程序（例如mkfs）一起使用的那些扇区的列表，因此它们在某些时候不会被使用，因此不会破坏数据。本文介绍-–如何找出不良部门。Linux硬盘上的坏块。要获取有关计算机上的块设
如何分析Python代码以找出问题区域？

问题内容：我有一个跨多个项目的大型资源库。我想生成一份有关源代码运行状况的报告，以确定需要解决的问题区域。具体来说，我想找出循环复杂度高的例程，确定重复性，并可能运行一些类似皮棉的静态分析以发现可疑（因而可能是错误的）构造。我应该如何构建这样的报告？问题答案：为了测量圈复杂度，traceback.org提供了一个不错的工具。该页面还很好地概述了如何解释结果。 +1为pylint。它非常适
如何找出对象的类型（在Swift中）？

问题内容：当试图理解一个程序时，或者在某些极端情况下，能够真正找出某种类型的东西很有用。我知道调试器可以向您显示一些类型信息，并且您通常可以依靠类型推断来避免在那种情况下不指定类型，但是我仍然很想拥有类似Python的东西更新：在Swift的最新版本中对此进行了更改，现在为您提供了对类型的引用，而不是动态类型的实例。这似乎是最有前途的，但到目前为止我还无法找出实际的类型我还尝试使用类引用
在图中找到区域数

本文向大家介绍在图中找到区域数，包括了在图中找到区域数的使用技巧和注意事项，需要的朋友参考一下问题陈述令“ G”为具有20个顶点的连接平面图，每个顶点的度为3。找到图中的区域数。解根据度定理的总和， 20 ∑ i = 1 deg（V i）= 2 | E | 20(3)= 2 | E | | E | = 30 根据欧拉的公式， | V | + | R | = | E | + 2 20+ |
如何在Python中找出方法的多样性

问题内容：我想找出Python中某个方法的优点（它接收的参数数量）。现在我正在这样做：我希望能够实现这一目标：更新：现在上面的函数无法使用内置类型，对此的任何帮助也将不胜感激：问题答案： Python标准库中的模块是您的朋友- 请参阅在线文档！返回四个选项的元组，：是“主元数”，但参数数量可以从任何东西到无穷大，如果你有和/或没有，而一些参数可以省略（默认和）如果不是。你怎么把它变成一
如何在出列中查找并返回对象？

我正在使用一个双端队列（java.util.Dequeue），希望在队列中找到一个对象并返回它。我目前正在使用方法检查队列是否包含对象，但不知道如何获取找到的对象的实际实例。正在搜索的实例不是同一个实例，因为我正在重写方法来测试类变量子集的相等性。如果不可能使用退出来做到这一点，那么我应该用什么来代替呢？我需要将对象推送到列表的两端，并从一开始就将其删除。显然能够搜索一个对象并得到它的实例化。

如何在google maps api中找出区域

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档