將谷歌地圖中的座標和數據保存在數據庫中

Question

我正在製作一個地圖項目，當我選擇一個區域（使用谷歌地圖繪圖工具）時，彈出一個信息窗口，我可以寫一個名稱和一個描述，然後保存這些和它的座標。我正在使用一個POST表單，到目前爲止，我可以在我的數據庫中保存名稱和描述，但我找不到保存座標的方法。我已經嘗試過沒有成功通過POST或將一些PHP放入我的JS中。你能幫忙嗎？給我任何提示？一些示例代碼？提前致謝！！！ 這裏是矩形繪圖工具我的js代碼：

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

添加您創建的座標（coordsrec）到字段的形式：

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

代碼片段：

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