Question

请尝试在地图上显示多个矩形，当拖动时，它应该返回绑定但是我得到的是地图上绑定的最后一个矩形。我使用谷歌地图api和JavaScript来实现它，下面是代码

var rectangle;
var map;
var infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(6.5233, 3.5408),
    zoom: 9
  });

  var bound = [{
    "bounds": {
      "north": 8.265855052877221,
      "south": 7.841615185204699,
      "east": 4.0704345703125,
      "west": 3.460693359375
    },
    "center": {
      "lat": 8.05373511904096,
      "lng": 3.76556396484375
    }
  }, {
    "bounds": {
      "north": 8.178867909130346,
      "south": 7.498642690451353,
      "east": 4.6197509765625,
      "west": 4.5538330078125
    },
    "center": {
      "lat": 7.83875529979085,
      "lng": 4.5867919921875
    }
  }, {
    "bounds": {
      "north": 8.178867909130346,
      "south": 7.498642690451353,
      "east": 4.9273681640625,
      "west": 4.5538330078125
    },
    "center": {
      "lat": 7.83875529979085,
      "lng": 4.7406005859375
    }
  }];

  // Define the rectangle and set its editable property to true.
  var ArrayOfrectangle = new Array;
  for (rectangleMap in bound) {
    rectangle = new google.maps.Rectangle({
      bounds: bound[rectangleMap].bounds,
      editable: true,
      draggable: true
    });
    rectangle.setMap(map);
    ArrayOfrectangle.push(rectangle);
  }



  // Add an event listener on the rectangle.
  $.each(ArrayOfrectangle, function(i, v){

    v.addListener('bounds_changed', showNewRect(v));
  });


  // Define an info window on the map.
  infoWindow = new google.maps.InfoWindow();
}
// Show the new coordinates for the rectangle in an info window.

/** @this {google.maps.Rectangle} */
function showNewRect(v) {
  var ne = v.getBounds().getNorthEast();
  var sw = v.getBounds().getSouthWest();

  var contentString = '<b>Rectangle moved.</b><br>' +
    'New north-east corner: ' + ne.lat() + ', ' + ne.lng() + '<br>' +
    'New south-west corner: ' + sw.lat() + ', ' + sw.lng();

  // Set the info window's content and position.
  infoWindow.setContent(contentString);
  infoWindow.setPosition(ne);

  infoWindow.open(map);
}

请问我在使用bounds_changed事件时如何获得其他形状的界限。

Answer 1

将事件监听器添加到循环内的矩形对我有用（而不是对创建的最后一个矩形执行一次）：

for (rectangleMap in bound) {
  var rectangle = new google.maps.Rectangle({
    bounds: bound[rectangleMap].bounds,
    editable: true,
    draggable: true
  });
  rectangle.setMap(map);
  // add the event listener to the rectangle
  rectangle.addListener('bounds_changed', showNewRect);
}

代码段

var map;
var infoWindow;

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: new google.maps.LatLng(6.5233, 3.5408),
      zoom: 8
    });
    infoWindow = new google.maps.InfoWindow();
    var mapBnds = new google.maps.LatLngBounds();
    // Define the rectangle and set its editable property to true.
    for (rectangleMap in bound) {
      var rectangle = new google.maps.Rectangle({
        bounds: bound[rectangleMap].bounds,
        editable: true,
        draggable: true
      });
      mapBnds.union(rectangle.getBounds());
      rectangle.setMap(map);
      rectangle.addListener('bounds_changed', showNewRect);
    }
    map.fitBounds(mapBnds);
  }
  // Show the new coordinates for the rectangle in an info window.

/** @this {google.maps.Rectangle} */
function showNewRect() {
  var ne = this.getBounds().getNorthEast();
  var sw = this.getBounds().getSouthWest();

  var contentString = '<b>Rectangle moved.</b><br>' +
    'New north-east corner: ' + ne.lat() + ', ' + ne.lng() + '<br>' +
    'New south-west corner: ' + sw.lat() + ', ' + sw.lng();

  // Set the info window's content and position.
  infoWindow.setContent(contentString);
  infoWindow.setPosition(ne);
  infoWindow.open(map);
}
google.maps.event.addDomListener(window, "load", initMap);
var bound = [{
  "bounds": {
    "north": 8.265855052877221,
    "south": 7.841615185204699,
    "east": 4.0704345703125,
    "west": 3.460693359375
  },
  "center": {
    "lat": 8.05373511904096,
    "lng": 3.76556396484375
  }
}, {
  "bounds": {
    "north": 8.178867909130346,
    "south": 7.498642690451353,
    "east": 4.6197509765625,
    "west": 4.5538330078125
  },
  "center": {
    "lat": 7.83875529979085,
    "lng": 4.5867919921875
  }
}, {
  "bounds": {
    "north": 8.178867909130346,
    "south": 7.498642690451353,
    "east": 4.9273681640625,
    "west": 4.5538330078125
  },
  "center": {
    "lat": 7.83875529979085,
    "lng": 4.7406005859375
  }
}];

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

如何从地图上的多个形状指向一个形状

1 个答案: