javascript - 将Google map 中的坐标和数据保存到数据库中

我正在做一个地图项目，当我选择一个区域（使用Google Maps绘图工具）时，会弹出一个信息窗口，我可以写一个Name和Description，然后保存它们及其坐标。我正在使用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; .

最佳答案

将您创建的坐标（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>