将谷歌地图中的坐标和数据保存在数据库中

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>