将来自 Google 地图的坐标和数据保存在数据库中

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);
});

我尝试将坐标作为隐藏字段发送，但无法成功。

我试过这样：

<input type="hidden" name="coords" id="coords" value="coordsrec">

但它会将其保存为数据库中的单词“coordsrec”。

我也试过了：

<input type="hidden" name="coords" id="coords" value="<?php echo $coordsrec; ?>"> 

或添加行：

document.getElementById("coords").value = coordsrec; . 

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

代码 sn-p：

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