Google maps 如何根据用户输入的地点创建多边形

基本上，我想创建一个基于用户搜索一个地方的多边形。例如，如果用户搜索（扇区56，Gurgaon），那么如何获取用户搜索的多边形坐标

例如，有以下站点结果：

在这里，用户搜索了“Sector 56，gurgaon”，并根据搜索结果执行以下操作（由“inspect element”属性显示）：

• 获取搜索的详细信息
• 获取多边形坐标
• 基于 多边形坐标显示位于该多边形中的特性

如何做同样的事情？

#map#u canvas{height:400px；}
<style>#map_canvas {height: 400px;}</style>
<div id="map_canvas"></div>
<script src="http://maps.googleapis.com/maps/api/js?libraries=geocoder"></script>
<input type="text" id="search_address" value=""/>
<button onclick="search();">Search</button>
<hr>
<input id="display" placeholder="coordinates"/>
<script>
var geocoder;
var polygonPoints = [];
var polygonObject;
var markers = [];  // marker objects

function initialize() {
  geocoder = new google.maps.Geocoder();
  var myCenter = new google.maps.LatLng(50.5, 4.5);
  var myOptions = {
    zoom: 6,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: myCenter
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

function search() {
  geocoder.geocode(
    {'address': document.getElementById("search_address").value}, 
    function(results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
        var location = results[0].geometry.location;
        // let's add that point to the polygon
        addPointToPolygon(location);
        // add a marker there.  Feel free to delete next line, if you don't want a marker there
        markers.push(newMarker(location, map));
        // center map on that point
        map.setCenter(location);
        // display the points in an text element (input)
        displayPoints(polygonPoints);
        // make sure the map shows all the points
        fitBounds(polygonPoints, map);
      } 
    }
  );
};

function addPointToPolygon(location) {
  // add the point to the array
  polygonPoints.push(location);
  // a polygon must have 3 points or more
  if(polygonPoints.length >= 3) {
    // first destroy the previous polygon (with 1 fewer point)
    if(polygonObject) {
      polygonObject.setMap(null);
    }
    // new polygon
    polygonObject = polygon(polygonPoints, map);
  }
}

// returns a polygon object
function polygon(points, map) {
  // Construct the polygon.
  return new google.maps.Polygon({
    paths: points,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map
  });  
}

function newMarker(location, map) {
  return new google.maps.Marker({
    position: location,
    map: map
  });
}

function displayPoints(locations) {
  for (var i in locations) {
    document.getElementById("display").value += locations[i].lat() +','+ locations[i].lng() +' ; ';
  }
}

function fitBounds(locations, map) {
  // only fit bounds after 2 or more points.
  if (locations.length < 2) {
    return false;
  }
  var bounds = new google.maps.LatLngBounds();
  for (var i in locations) {
    bounds.extend(locations[i]);
  }
  map.fitBounds(bounds);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

搜寻

var地理编码器；
var polygonPoints=[]；
var多克隆对象；
变量标记=[]；//标记对象
函数初始化（）{
geocoder=新的google.maps.geocoder（）；
var myCenter=newgoogle.maps.LatLng（50.5,4.5）；
变量myOptions={
缩放：6，
mapTypeId:google.maps.mapTypeId.ROADMAP，
中心：迈森特
}
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
}
函数搜索（）{
地理编码(
{'address'：document.getElementById（“搜索地址”）.value}，
功能（结果、状态）{
如果（status==google.maps.GeocoderStatus.OK）{
var location=results[0]。geometry.location；
//让我们将该点添加到多边形
addPointToPolygon（位置）；
//在那里添加一个标记。如果您不想在那里添加标记，请随意删除下一行
markers.push（newMarker（位置、地图））；
//那个点的中心地图
地图设置中心（位置）；
//显示文本元素中的点（输入）
显示点（多边形点）；
//确保地图上显示了所有的点
fitBounds（多边形点、地图）；
} 
}
);
};
函数addPointToPolygon（位置）{
//将点添加到阵列中
多边形点。推（位置）；
//多边形必须有3个或更多点
如果（polygonPoints.length>=3）{
//首先销毁上一个多边形（少1个点）
if（多边形对象）{
polygonoObject.setMap（空）；
}
//新多边形
多边形对象=多边形（多边形点，贴图）；
}
}
//返回多边形对象
函数多边形（点、贴图）{
//构造多边形。
返回新的google.maps.Polygon({
路径：点，
strokeColor:“#FF0000”，
笔划不透明度：0.8，
冲程重量：2，
填充颜色：'#FF0000'，
不透明度：0.35，
地图：地图
});  
}
功能新标记（位置、地图）{
返回新的google.maps.Marker({
位置:位置,，
地图：地图
});
}
功能显示点（位置）{
对于（位置中的var i）{
document.getElementById（“display”）.value+=位置[i].lat（）++'，'+位置[i].lng（）++'；
}
}
功能边界（位置、地图）{
//仅在2个或更多点之后拟合边界。
如果（位置。长度<2）{
返回false；
}
var bounds=new google.maps.LatLngBounds（）；
对于（位置中的var i）{
扩展（位置[i]）；
}
映射边界（bounds）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

您计划如何以及在何处保存/存储这些坐标？php/mySQL数据库？此外，多边形不应该是问题，但使该多边形闭合是另一回事。当你在一张纸上随机画点时，你会得到像星星一样的东西，上面有尖刺。简单的例子：你可以得到一个五角星；而你需要一个五角大楼。这是一个额外的问题。您可以在mongodb中存储坐标。五角星和五角星对于我的用例来说是一个较小的问题，我对星号和尖峰都很满意。主要问题是如何获得多边形坐标。请检查我在问题中共享的链接。我需要为上述搜索创建类似的多边形。但我不知道如何获取该区域的坐标。OP的意思是他想要结果位置的边界坐标。例如，如果用户搜索“纽约”，则OP希望检索定义“纽约”多边形的坐标<代码>结果[0]。几何体.location仅返回单个lat lng对，而不是定义多边形的所有对。