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

时间:2016-04-11 13:47:36

标签: google-maps

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

非常感谢任何形式的帮助。

1 个答案:

答案 0 :(得分:2)

我希望这会有所帮助。调整'网格化'变量到网格所需的度数。

工作示例:https://jsfiddle.net/fcoramos/kw1jpz5h/6/

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