Google maps 在谷歌地图上快速绘制网格和标记：通过拖放_Google Maps

Google maps 在谷歌地图上快速绘制网格和标记：通过拖放

google-maps

Google maps 在谷歌地图上快速绘制网格和标记：通过拖放,google-maps,Google Maps,是否有任何实用程序/软件可以在谷歌地图上绘制网格，并在网格中每个单元格的中心放置标记非常感谢您的任何帮助。我希望这对您有所帮助。将“gridsize”变量调整为网格所需的度数工作示例： var映射， myCenter=new google.maps.LatLng（-33，-71）， gridstyle={strokeColor:'yellow'，strokeWeight:1}；网格=[]，标记=[] 函数初始化（）{ var mapProp={ 中心：迈森特，缩放：4， mapTyp

是否有任何实用程序/软件可以在谷歌地图上绘制网格，并在网格中每个单元格的中心放置标记

非常感谢您的任何帮助。

我希望这对您有所帮助。将“gridsize”变量调整为网格所需的度数

工作示例：


var映射，
myCenter=new google.maps.LatLng（-33，-71），
gridstyle={strokeColor:'yellow'，strokeWeight:1}；
网格=[]，
标记=[]
函数初始化（）{
var mapProp={
中心：迈森特，
缩放：4，
mapTypeId:google.maps.mapTypeId.HYBRID，
scaleControl:true}；
map=new google.maps.map（document.getElementById（'map'），mapProp）；
var gridsize=5；//网格大小（度）
google.maps.event.addListener（map，'bounds_changed'，function（）{
var网格线，
gridlat，
gridlon，
n=map.getBounds（）.getNorthEast（）.lat（），
s=map.getBounds（）.getSouthWest（）.lat（），
e=map.getBounds（）.getNorthEast（）.lng（），
w=map.getBounds（）.getSouthWest（）.lng（）
//如果设置了上一个栅格和标记，我们将删除它们。
如果（栅格长度>0）{
对于（var i=0；i0）
{
对于（var i=0；i

我希望这能有所帮助。将“gridsize”变量调整为网格所需的度数

工作示例：


var映射，
myCenter=new google.maps.LatLng（-33，-71），
gridstyle={strokeColor:'yellow'，strokeWeight:1}；
网格=[]，
标记=[]
函数初始化（）{
var mapProp={
中心：迈森特，
缩放：4，
mapTypeId:google.maps.mapTypeId.HYBRID，
scaleControl:true}；
map=new google.maps.map（document.getElementById（'map'），mapProp）；
var gridsize=5；//网格大小（度）
google.maps.event.addListener（map，'bounds_changed'，function（）{
var网格线，
gridlat，
gridlon，
n=map.getBounds（）.getNorthEast（）.lat（），
s=map.getBounds（）.getSouthWest（）.lat（），
e=map.getBounds（）.getNorthEast（）.lng（），
w=map.getBounds（）.getSouthWest（）.lng（）
//如果设置了上一个栅格和标记，我们将删除它们。
如果（栅格长度>0）{
对于（var i=0；i0）
{
对于（var i=0；i

要求我们推荐或查找书籍、工具、软件库、教程或其他非现场资源的问题对于堆栈溢出来说是离题的，因为它们往往会吸引固执己见的答案和垃圾邮件。相反，请描述问题以及迄今为止为解决该问题所做的工作。要求我们推荐或查找书籍、工具、软件库、教程或其他非现场资源的问题对于堆栈溢出来说是离题的，因为它们往往会吸引自以为是的答案和垃圾邮件。相反，请描述问题以及迄今为止为解决问题所做的工作。您好，非常感谢您的回答，非常有用。现在，我希望网格（框）以米为单位，而不是以度为单位，正如您编写的ar gridsize=5//代码中的网格大小（以度为单位）。我需要1000*1000m^2的网格

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<script src="https://maps.googleapis.com/maps/api/js" ></script>
<script>
var map,
    myCenter = new google.maps.LatLng(-33,-71),
    gridstyle = { strokeColor: 'yellow', strokeWeight: 1 };  
    grid = [],
    markers = []

function initialize() {
  var mapProp = {
    center:myCenter,
    zoom:4,
    mapTypeId:google.maps.MapTypeId.HYBRID,
    scaleControl:true };

  map=new google.maps.Map(document.getElementById('map'),mapProp);

  var gridsize = 5; //Grid size in degrees

  google.maps.event.addListener(map,'bounds_changed', function() {
      var gridline,
          gridlat,
          gridlon,
          n = map.getBounds().getNorthEast().lat(),
          s = map.getBounds().getSouthWest().lat(),
          e = map.getBounds().getNorthEast().lng(), 
          w = map.getBounds().getSouthWest().lng()

       // If a previous grid and markers are set, we remove them.
       if (grid.length > 0) {
          for (var i = 0; i < grid.length; i++) { grid[i].setMap(null);  }
        }     

        if (markers.length > 0)
        {
          for (var i = 0; i < markers.length; i++) { markers[i].setMap(null); }
        }

      var sgrid = Math.round(s/gridsize)*gridsize;
      var wgrid = Math.round(w/gridsize)*gridsize;

      // Here we create the grid.
      for (gridlat = sgrid; gridlat < n; gridlat = gridlat + gridsize)
         {
          var gridline = new google.maps.Polyline({
           path: [{lat: gridlat, lng: e}, {lat: gridlat, lng: w}],
           map: map
           });
           gridline.setOptions(gridstyle);
           grid.push(gridline);
        }

      for (gridlng = wgrid; gridlng < e; gridlng = gridlng + gridsize)
         {
          var gridline = new google.maps.Polyline({
           path: [{lat: n, lng: gridlng}, {lat: s, lng: gridlng}],
           map: map
           });
           gridline.setOptions(gridstyle);
           grid.push(gridline);
        }

     // Here we create the markers.    
     for (markerlat = sgrid+gridsize/2; markerlat < n; markerlat = markerlat + gridsize)
     {
       for (markerlng = wgrid+gridsize/2; markerlng < e; markerlng = markerlng + gridsize)
        {
          var markerposition = {lat: markerlat, lng: markerlng};
          var marker = new google.maps.Marker({ 
            position: markerposition,
            map: map
          });
          markers.push(marker);
       }
     }
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map" style="width:500px;height:500px;"></div>
</body>
</html>