Google maps 谷歌地图API按地址查找区域_Google Maps_Google Maps Api 3

Google maps 谷歌地图API按地址查找区域

google-maps google-maps-api-3

Google maps 谷歌地图API按地址查找区域,google-maps,google-maps-api-3,Google Maps,Google Maps Api 3,在我的应用程序中，我想按区域对项目地址进行分组，我的项目已经使用Google maps API来选择地址，并且具有Lat/Long坐标。我想自动按区域对它们进行分组例如如果我们有地址应自动将其分配到区域，并在此处标记：我的申请表中还应管理这些区域据我所知，我应该将所有多边形坐标存储在后端，然后使用一些算法来查找地址的坐标是否属于该多边形？我说得对吗？或者我可以用谷歌地图API来获取它？我制作了一些非常粗糙的多边形（如果我侮辱了维尔纽斯的任何人，请原谅），但我想你会明白的您正在寻找的

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

例如如果我们有地址

应自动将其分配到区域，并在此处标记：

我的申请表中还应管理这些区域

据我所知，我应该将所有多边形坐标存储在后端，然后使用一些算法来查找地址的坐标是否属于该多边形？我说得对吗？或者我可以用谷歌地图API来获取它？

我制作了一些非常粗糙的多边形（如果我侮辱了维尔纽斯的任何人，请原谅），但我想你会明白的

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

因此，我认为这为您提供了所需的组件；柱基。但是如果你想发生什么特别的事情，请告诉我

<!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>


html，正文，#地图画布{
高度：400px；
边际：0px；
填充：0px
}
#我的分区{
边框：1px纯灰；
}
//这些都是对维尔纽斯长辈的粗略估计
//请使用正确的边界
变量polygonda=[
{名称：'Senamiestis'，颜色：'ff0000'，点数：[54.68256489008578，25.315074920654297]，[54.67631238544733，25.30803680419922]，[54.670555259971174，25.288639068603516]，[54.67522057995425，25.2699279778515625]，[54.68812186362444，25.259113317778]，[54.695067073871，25.2652937833871]，[12894744]，
{名称：'Rasos'，颜色：'00ff00'，点数：[[54.66906621536605，25.30563544921875]，[54.68554193480844，25.329322814941406]，[54.68335879002739，25.362625122070312]，[54.656754688760536，25.3454589375]，[54.61025498151579146，25.328292846679688]，[54.6056162741719，25.30839580725]，[54.657082827422]，
{名称：'Antakalis'，颜色：'#0000ff'，点数：[54.72699938009521，25.30426025390625]，[54.71589532099472，25.34820556640625]，[54.807808060259057，25.500640869140625]，[54.81967870427071，25.335845947265625]，[54.7713852049525，25.3001408575]]
];
var=[]；
var映射；
//随机标记。
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标记=[]；
变量映射选项={
缩放：10，
中心：new google.maps.LatLng（54.68261637187925,25.287838697433454），//维尔纽斯大学
mapTypeId:google.maps.mapTypeId.ROADMAP
};
函数初始化（）{
map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；
//画记号笔
var markerLocations=toLatLng（markerData）；
对于（markerLocations中的var i）{
markers.push（新的google.maps.Marker）({
职位：markerLocations[i]，
title:i，//我将把索引设置为title。
地图：地图
}) );
}
//绘制多边形
for（Polygonda中的变量j）{
var points=toLatLng（Polygonda[j].点）；
多边形[j]=绘图多边形（点，多边形[j]。颜色，多边形[j]。名称）；
//让我们看看这个多边形中是否有标记
var内容=“”；
对于（markerLocations中的var i）{
if（google.maps.geometry.poly.containsLocation（markers[i].位置，polygons[j]））{
//展示
content+=''+标记[i].title+''；
//我想你真正想做的是，把这些数据放在一个数组中，或者说
}
}
document.getElementById（'display-data'）。innerHTML+=''+polygonda[j]。name+''+''+content+'
；
}
}
//获取一个坐标数组[[]、[]、[]并返回Google Maps LatLng对象
函数toLatLng（点阵列）{
var位置=[]；
for（点阵列中的变量i）{
locations.push（新的google.maps.LatLng（point_数组[i][0]，point_数组[i][1]）；
}
返回地点；
}
//绘制多边形
函数drawPolygon（点、颜色、名称）{
如果（点长度<3）{
返回；
}
//@见https://developers.google.com/maps/documentation/javascript/examples/polygon-simple
多边形=新的google.maps.polygon({
路径：点，
strokeColor：颜色，
笔划不透明度：0.8，
冲程重量：2，
fillColor:color，
不透明度：0.35，
标题：姓名，
地图：地图
});
返回多边形；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
李先生{
列表样式：无；
}
李{
显示：内联；
边框：1px纯灰；
填充物：5px；
保证金：5px；
}

您可以做的是更新数据库中的markers表；添加一个字段“eldership”

您将从我的脚本中获得的数据发送到服务器，使用Ajax更新表（=您在标记的eldership字段中填写了eldership的id），因此您只需执行一次（并且您需要更新新标记…）。

您能更具体一些吗？告诉我你有什么（在数据库里？）。你有长辈的界限吗？你有标记的位置吗。。。告诉我你想要这些结果。您是否将其放入表单并将结果提交给服务器（数据库）@EmmanuelDelay在数据库中，我已经从Maps API中获取了带有地址和位置（纬度/经度）标记的项。我还有一些长辈，物品现在是手工分配给长辈的。我想自动完成。实际问题是：什么信息