Question

我正在使用Google Maps Javascript开发一个应用程序，用户可以在地图上绘制一个矩形，以便该区域的边界可用于在数据库中查询他们所选区域内的数据。我还希望有HTML输入框，以便他们可以通过在需要时键入纬度和经度来编辑边界。我可以这样做，但是当他们更改值时，我希望地图更新。

我了解HTML onchange标记需要function initialize() { //some code omitted here var drawingManager = new google.maps.drawing.DrawingManager({ drawingMode: google.maps.drawing.OverlayType.MARKER, drawingControl: true, drawingControlOptions: { drawingModes: [ google.maps.drawing.OverlayType.RECTANGLE ] }, rectangleOptions: { // some code omitted here } }); google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event){ // when the overlay is complete, update the html form fields update_bounds_fields(event); // don't allow the user to draw more than 1 rectangle // (disable drawing controls after the first one has been drawn) drawingManager.setDrawingMode(null); drawingManager.setOptions({ drawingControl: false }); // The drawn area is editable with mouse so also want to // update the html form when the area is edited google.maps.event.addListener(event.overlay, 'bounds_changed', function() { update_bounds_fields(event); }); }); drawingManager.setMap(map); }属性，其值是对将更新地图的函数的调用。但是，我不确定在函数中添加什么来更新矩形边界。

这是我用来创建用户用来进行选择的地图的Javascript代码：

<form name="bounds_form" action="index.php" method="get">
     <input type="text" id="northwest-latitude" name="nw-lat" onchange="update_map_bounds();"></input></br>
     <input type="text" id="northwest-longitude" name="nw-lng" onchange="update_map_bounds();"</input></br>
     <input type="text" id="southeast-latitude" name="se-lat" onchange="update_map_bounds();"></input></br>
     <input type="text" id="southeast-longitude" name="se-lng" onchange="update_map_bounds();"></input></br>
     <center><input type="submit" id="submit-button" onclick="validate_bounds(bounds_form)"></center>
  </form>

表单的HTML代码如下：

{{1}}

因此，只要更改其中一个表单字段的值，我就会相应地更新地图上显示的矩形。

Answer 1

在全局范围内访问矩形：

var rectangle;  // needs to be in the global scope, outside of an function

google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) {
    // when the overlay is complete, update the html form fields
    update_bounds_fields(event);
    rectangle = event.overlay;

更改onchange函数中矩形的边界

function update_map_bounds() {
    var north = parseFloat(document.getElementById('northwest-latitude').value);
    var south = parseFloat(document.getElementById('southeast-latitude').value);
    var east = parseFloat(document.getElementById('southeast-longitude').value);
    var west = parseFloat(document.getElementById('northwest-longitude').value);
    if (!isNaN(north) && !isNaN(south) && !isNaN(west) && !isNaN(east)) {
        var NE = new google.maps.LatLng(north, east);
        var SW = new google.maps.LatLng(south, west);
        var newRect = new google.maps.LatLngBounds(SW,NE);
        rectangle.setBounds(newRect);
        map.fitBounds(newRect);
    }
}

proof of concept fiddle

代码段：

var map;
var rectangle;

function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }); //some code omitted here
  var drawingManager = new google.maps.drawing.DrawingManager({
    drawingMode: google.maps.drawing.OverlayType.MARKER,
    drawingControl: true,
    drawingControlOptions: {
      drawingModes: [
        google.maps.drawing.OverlayType.RECTANGLE
      ]
    },
    rectangleOptions: {
      editable: true
        // some code omitted here
    }
  });
  google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
    // when the overlay is complete, update the html form fields
    update_bounds_fields(event);
    rectangle = event.overlay;

    // don't allow the user to draw more than 1 rectangle
    // (disable drawing controls after the first one has been drawn)
    drawingManager.setDrawingMode(null);
    drawingManager.setOptions({
      drawingControl: false
    });

    // The drawn area is editable with mouse so also want to
    // update the html form when the area is edited
    google.maps.event.addListener(event.overlay, 'bounds_changed', function() {
      update_bounds_fields(event);
    });
  });

  drawingManager.setMap(map);
}
google.maps.event.addDomListener(window, "load", initialize);

function update_bounds_fields(event) {
  document.getElementById('northwest-latitude').value = event.overlay.getBounds().getNorthEast().lat();
  document.getElementById('northwest-longitude').value = event.overlay.getBounds().getSouthWest().lng();
  document.getElementById('southeast-latitude').value = event.overlay.getBounds().getSouthWest().lat();
  document.getElementById('southeast-longitude').value = event.overlay.getBounds().getNorthEast().lng();
}

function update_map_bounds() {
  var north = parseFloat(document.getElementById('northwest-latitude').value);
  var south = parseFloat(document.getElementById('southeast-latitude').value);
  var east = parseFloat(document.getElementById('southeast-longitude').value);
  var west = parseFloat(document.getElementById('northwest-longitude').value);
  if (!isNaN(north) && !isNaN(south) && !isNaN(west) && !isNaN(east)) {
    var NE = new google.maps.LatLng(north, east);
    var SW = new google.maps.LatLng(south, west);
    var newRect = new google.maps.LatLngBounds(SW, NE);
    rectangle.setBounds(newRect);
    map.fitBounds(newRect);
  }
}

html,
body,
#map_canvas {
  height: 500px;
  width: 500px;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing"></script>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>
<form name="bounds_form" action="index.php" method="get">
  <input type="text" id="northwest-latitude" name="nw-lat" onchange="update_map_bounds();" />
  <br/>
  <input type="text" id="northwest-longitude" name="nw-lng" onchange="update_map_bounds();" />
  <br/>
  <input type="text" id="southeast-latitude" name="se-lat" onchange="update_map_bounds();" />
  <br/>
  <input type="text" id="southeast-longitude" name="se-lng" onchange="update_map_bounds();" />
  <br/>
  <center>
    <input type="submit" id="submit-button" onclick="validate_bounds(bounds_form)" />
  </center>
</form>

在Google地图中更改绘制矩形的边界

1 个答案: