Draw Gitter und Marker auf Google Maps schnell: per Drag & Drop

Gibt es einen Nutzen/Software-Gitter auf Google Maps zu ziehen und in der Mitte jeder Zelle im Gitter ..Draw Gitter und Marker auf Google Maps schnell: per Drag & Drop

Jede Art von Hilfe setzt Marker wird sehr geschätzt.

Quelle

2016-04-11 Shahid Karimi

Fragen fragen uns, ** empfehlen oder ein Buch, Werkzeug, Software-Bibliothek, Tutorial oder andere Off-Site-Ressource finden ** sind Wegthema für Stack-Überlauf, da sie dazu neigen, um eigensinnige Antworten und Spam zu bekommen. Beschreiben Sie stattdessen das Problem und was bisher unternommen wurde, um es zu lösen. – Adriaan

Ich hoffe, das hilft. Passen Sie die Variable 'gridsize' an die für Ihr Raster erforderlichen Werte an.

Arbeitsbeispiel: 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>

Quelle

2016-04-11 20:19:48 Fco

hallo danke viel fot für ihre antwort fco, sehr nützlich. Jetzt möchte ich Gitter (Boxen) in Meter statt Grad haben, wie Sie ar gridsize = 5 geschrieben haben; // Rastergröße in Grad in Code. Ich brauche 1000 * 1000 m^2 Gitter. was soll ich machen ? Danke noch einmal – alone

Draw Gitter und Marker auf Google Maps schnell: per Drag & Drop

Antwort

Verwandte Themen