Question

我正在开发一个应用程序，我需要通过矩形选择区域并将其放入输入中的SouthWest和NorthEast，以便将它们存储在我的数据库中这是我的代码我需要帮助......

<!DOCTYPE html>
<html>
    <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
html, body, #map-canvas {
    margin: 0;
    padding: 0;
    width: 500px;
    height: 500px;
 left;
}
</style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
var map;
//var bounds;

function updateRectanglePosition(rectangle) {
    var point1 = this.getBounds().getNorthEast();
    var point2 = this.getBounds().getSouthWest();
     document.getElementById('lat1').value = point1.Lat();
     document.getElementById('lng1').value = point1.Lng();
      document.getElementById('lat2').value = point2.Lat();
     document.getElementById('lng2').value = point2.Lng();

}

function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(44.490, -78.649),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

      var Bounds = new google.maps.LatLngBounds(
       new google.maps.LatLng(44.490, -78.649),
       new google.maps.LatLng(44.599, -78.443)
  );

  var rectangle = new google.maps.Rectangle({
    bounds: Bounds,
   draggable: true,
   editable: true,
    map : map,
  });   
  rectangle.setMap(map);
  updateRectanglePosition(rectangle);
 }


google.maps.event.addDomListener(window, 'load', initialize);

    </script>
    </head>
    <body>
<div id="map-canvas"></div>
<div id="aa">
      <form action="" method="post">
    <p>
          <label>longitude1</label>
          <input type="text" id="lng1" name="lng1"/>
          <label>latitude1</label>
          <input type="text" id="lat1" name="lat1"/>
        </p>
    <p>
          <label>longitude2</label>
          <input type="number" id="lng2" name="lng2"/>
          <label>latitude2</label>
          <input type="number" id="lat2" name="lat2"/>
        </p>
    <p>
          <input type="submit" name="ajouter" id="ajouter" value="ajouter"/>
        </p>
  </form>
    </div>

    <b id="output"></b>

</body>
</html>

请帮助......我真的需要它来在我的训练中取得好成绩

Answer 1

函数Lat()和Lng()应该没有大写字母，this也应该是rectangle：

function updateRectanglePosition(rectangle) {
    var point1 = rectangle.getBounds().getNorthEast();
    var point2 = rectangle.getBounds().getSouthWest();
    document.getElementById('lat1').value = point1.lat();
    document.getElementById('lng1').value = point1.lng();
    document.getElementById('lat2').value = point2.lat();
    document.getElementById('lng2').value = point2.lng();
}

这应该有效。

Answer 2

如果我运行你的代码，即使是IE也会给我这个错误：

Message: Object doesn't support property or method 'getBounds'
Line: 22
Char: 5
Code: 0

在此功能的第一行：

function updateRectanglePosition(rectangle) {
    var point1 = this.getBounds().getNorthEast();
    var point2 = this.getBounds().getSouthWest();
    document.getElementById('lat1').value = point1.Lat();
    document.getElementById('lng1').value = point1.Lng();
    document.getElementById('lat2').value = point2.Lat();
    document.getElementById('lng2').value = point2.Lng();
}

一旦我解决了这个问题（通过将“this”更改为“矩形”），我就会收到错误：

document.getElementById('lat1').value = point1.Lat();

由于google.maps.LatLng对象没有Lat（）方法（或Lng（）方法）。 Javascript区分大小写，记录的方法是lat（）（和lng（））。

如何在输入中放置矩形边界？

2 个答案: