Speichern von Koordinaten und Daten von Google Maps in einer Datenbank

Question

Ich mache ein Map-Projekt, wo, wenn ich einen Bereich (mit Google Maps-Zeichenwerkzeuge) wählen ein Info-Fenster erscheint und ich kann einen Namen und eine Beschreibung schreiben und dann diese speichern und seine Koordinaten. Ich verwende ein POST-Formular und zu diesem Zeitpunkt kann ich den Namen und die Beschreibung in meiner DB speichern, aber ich finde keine Möglichkeit, die Koordinaten zu speichern. Ich habe bereits erfolglos versucht, es über POST zu übergeben oder PHP in mein JS zu schreiben. Könntest du helfen? Gib mir irgendeinen Hinweis? Ein Beispielcode? Danke im Voraus!!! Hier ist mein js Code für das Rechteck Zeichenwerkzeug:

google.maps.event.addListener(drawingManager, 'rectanglecomplete', function(rectangle) { 

    var ne = rectangle.getBounds().getNorthEast(); 
    var sw = rectangle.getBounds().getSouthWest(); 
    var nelat = ne.lat(); 
    var nelng = ne.lng(); 
    var swlat = sw.lat(); 
    var swlng = sw.lng(); 
    var coordsrec = ';' + nelat.toFixed(6) + ';' + nelng.toFixed(6)+ ';' + swlat.toFixed(6) + ';' + swlng.toFixed(6); 
    //console.log(coordsrec); 

    contentsr = '<form action="SaveData.php" method="POST"><b>Region Name : </b><br/><input type="text" size="20" name="region_name"/><input type="hidden" name="region_type" value="2"><br/><b>Description : </b><br/><textarea name="region_desc" cols="20" rows="3"></textarea><br/><center><br/><input type="submit" value="Save Region" name="save_region"></center></form>'; 

    var boundsr = new google.maps.LatLng(ne.lat(), ne.lng()); 

    infoWindow.setContent(contentsr); 
    infoWindow.setPosition(boundsr); 
    drawingManager.setDrawingMode(null); 
    infoWindow.open(map); 
}); 

Answer 1

die Koordinaten hinzufügen Sie (coordsrec) in ein Feld im Formular erstellen:

var coordsrec = nelat.toFixed(6) + ';' + nelng.toFixed(6)+ ';' + swlat.toFixed(6) + ';' + swlng.toFixed(6); 

contentsr = '<form action="SaveData.php" method="POST"><b>Region Name : </b><br/> 
      <input type="text" size="20" name="region_name"/> 
      <input type="hidden" name="region_type" value="2"><br/> 
      <b>Description : </b><br/><textarea name="region_desc" cols="20" rows="3"></textarea><br/> 
      Coordinates:<br/><input name="coords" type="text" size="40" value="'+coordsrec+'"/><br/> 
      <center><br/><input type="submit" value="Save Region" name="save_region"></center> 
      </form>'; 

proof of concept fiddle

Codeausschnitt:

// This example requires the Drawing library. Include the libraries=drawing 
 
// parameter when you first load the API. For example: 
 
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=drawing"> 
 
function initMap() { 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    center: { 
 
     lat: -34.397, 
 
     lng: 150.644 
 
    }, 
 
    zoom: 8 
 
    }); 
 
    var infoWindow = new google.maps.InfoWindow(); 
 
    var drawingManager = new google.maps.drawing.DrawingManager({ 
 
    drawingMode: google.maps.drawing.OverlayType.RECTANGLE, 
 
    drawingControl: true, 
 
    drawingControlOptions: { 
 
     position: google.maps.ControlPosition.TOP_CENTER, 
 
     drawingModes: [google.maps.drawing.OverlayType.RECTANGLE] 
 
    } 
 
    }); 
 
    drawingManager.setMap(map); 
 
    google.maps.event.addListener(drawingManager, 'rectanglecomplete', function(rectangle) { 
 

 
    var ne = rectangle.getBounds().getNorthEast(); 
 
    var sw = rectangle.getBounds().getSouthWest(); 
 
    var nelat = ne.lat(); 
 
    var nelng = ne.lng(); 
 
    var swlat = sw.lat(); 
 
    var swlng = sw.lng(); 
 
    var coordsrec = nelat.toFixed(6) + ';' + nelng.toFixed(6) + ';' + swlat.toFixed(6) + ';' + swlng.toFixed(6); 
 
    //console.log(coordsrec); 
 

 
    contentsr = '<form action="SaveData.php" method="POST"><b>Region Name : </b><br/><input type="text" size="20" name="region_name"/><input type="hidden" name="region_type" value="2"><br/><b>Description : </b><br/><textarea name="region_desc" cols="20" rows="3"></textarea><br/>Coordinates:<br/><input name="coords" type="text" size="40" value="' + coordsrec + '"/><br/><center><br/><input type="submit" value="Save Region" name="save_region"></center></form>'; 
 

 
    var boundsr = new google.maps.LatLng(ne.lat(), ne.lng()); 
 

 
    infoWindow.setContent(contentsr); 
 
    infoWindow.setPosition(boundsr); 
 
    drawingManager.setDrawingMode(null); 
 
    infoWindow.open(map); 
 
    }); 
 
}

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#map { 
 
    height: 100%; 
 
}

<div id="map"></div> 
 
<!-- Replace the value of the key parameter with your own API key. --> 
 
<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing&callback=initMap" async defer></script>