Question

在我的应用程序中，我想按区域对项目地址进行分组，我的项目已经使用Google maps API来选择地址并具有Lat / Long坐标。我想自动按区域对它们进行分组。

这个例子是如果我们有地址https://www.google.com/maps/place/Erfurto+g.+1,+Vilnius+04220,+Lietuva/@54.6765968,25.2102183,15.5z/data=!4m2!3m1!1s0x46dd9398506f84bd:0x6cc62f1d26bc6613

它应自动分配到区域，标记在此处： https://www.google.com/maps/place/Lazdynai,+Vilnius,+Lietuva/@54.6702541,25.1870655,14z/data=!4m2!3m1!1s0x46dd93a6cc53ba05:0x2600d18d4c454331

应该在我的申请中管理区域。

据我所知，我应该将所有MultiPolygon坐标存储在我的后端，然后使用一些算法来查找地址坐标是否属于该多边形？我对吗？或者我可以使用Google Map API以某种方式获取它？

Answer 1

我制作了一些非常粗糙的多边形（抱歉，如果我侮辱维尔纽斯的任何人:)），但我认为你会明白这一点。

您正在寻找的主要方法是google.maps.geometry.poly.containsLocation（）

所以我认为这可以为您提供所需的组件; plinciles。但如果您想要发生某些特定事件，请告诉我。

<!DOCTYPE html>
<html>
<head>
  <style>
    html, body, #map-canvas {
      height: 400px;
      margin: 0px;
      padding: 0px
    }
    #my_div {
      border: 1px solid grey;
    }
  </style>
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>    
  <script>
    // these are very rough estimations of the Elderships of Vilnius
    // please use the correct boundaries
    var polygonData = [
      {name: 'Senamiestis', color: '#ff0000', points: [[54.68256489008578, 25.315074920654297],[54.67631238544733, 25.30803680419922],[54.670555259971174, 25.288639068603516],[54.6752205795425, 25.269927978515625],[54.68812186362444, 25.259113311767578],[54.69506701073871, 25.26529312133789],[54.68832031289468, 25.30099868774414]]},
      {name: 'Rasos', color: '#00ff00', points: [[54.669066215366605, 25.305633544921875],[54.68554193480844, 25.329322814941406],[54.68335879002739, 25.362625122070312],[54.656754688760536, 25.345458984375],[54.610254981579146, 25.328292846679688],[54.60568162741719, 25.308380126953125],[54.65516583289068, 25.29705047607422]]},
      {name: 'Antakalnis', color: '#0000ff', points: [[54.72699938009521, 25.30426025390625],[54.71589532099472, 25.34820556640625],[54.80780860259057, 25.500640869140625],[54.81967870427071, 25.335845947265625],[54.771385204918595, 25.300140380859375]]}
    ];
    var polygons = [];
    var map;
    // random markers. 
    var markerData = [
      [54.75478050308602,25.3638149499893],
      [54.68324427673198,25.27517330646513],
      [54.70583916710748,25.240154385566694],
      [54.68453433466152,25.293562531471235],
      [54.72900384013322,25.330534100532514],
      [54.682078227560325,25.28394949436186],
      [54.65034635955749,25.30793917179106]
    ];
    var markers = [];

    var mapOptions = {
      zoom: 10,
      center: new google.maps.LatLng(54.682611637187925,25.287838697433454),  // Vilnius university
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    function initialize() {
      map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

      // draw the markers
      var markerLocations = toLatLng(markerData);
      for(var i in markerLocations) {
        markers.push( new google.maps.Marker({
          position: markerLocations[i],
          title: i,                           // I'll just set the index as title.
          map: map
        }) );
      }

      // draw the polygons
      for(var j in polygonData) {
        var points = toLatLng(polygonData[j].points);
        polygons[j] = drawPolygon(points, polygonData[j].color, polygonData[j].name);
        // let's see if markers are in this polygon
        var content = '';
        for(var i in markerLocations) {
          if (google.maps.geometry.poly.containsLocation(markers[i].position, polygons[j])) {
            // display
            content += '<li>' + markers[i].title + '</li>';
            // I guess what you really want to do, is put this data in an array, or so
          }
        }
        document.getElementById('display-data').innerHTML += '<h3>' + polygonData[j].name + '</h3>' + '<ul>' + content + '</ul><hr/>';
      }
    }

    // takes an array of coordinats, [  [], [], [] ] , and returns Google Maps LatLng objects  
    function toLatLng(point_arrays) {
      var locations = [];
      for(var i in point_arrays) {
        locations.push( new google.maps.LatLng(point_arrays[i][0], point_arrays[i][1]));
      }
      return locations;
    }

    // draws a polygon
    function drawPolygon(points, color, name) {
      if(points.length < 3) {
        return;
      }
      // @see https://developers.google.com/maps/documentation/javascript/examples/polygon-simple
      polygon = new google.maps.Polygon({
        paths: points,
        strokeColor: color,
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: color,
        fillOpacity: 0.35,
        title: name,
        map: map
      });
      return polygon;
    }

    google.maps.event.addDomListener(window, 'load', initialize);
  </script>
  <style>
    ul, li {
      list-style: none;
    }
    li {
      display: inline;
      border: 1px solid grey;
      padding: 5px;
      margin: 5px;
    }
  </style>
</head>
<body>
  <div id="map-canvas"></div>
  <div id="display-data"></div>
</body>
</html>

您可以做的是更新数据库中的标记表;添加一个字段'eldership'。

您将从我的脚本获取的数据发送到服务器，使用Ajax，您更新表格（=您在标记的eldership字段中填写长老的ID），因此您只需执行此操作一次（并且您需要更新新标记......）。

Google Maps API按地址查找区域

1 个答案: