在Google地图中单击矩形时，如何获取经度和纬度？

Question

I have created rectangle in Google map and would like to obtain Latitude and Longitude in code when a user clicks on the rectangle.

When I click on outside the rectangle I obtain Latitude and Longitude. When I click on the rectangle however, I'm unable to get Latitude and Longitude.

Here is My code:

var rectangle;
var map;
var infoWindow;

function initialize() {
  function calcBounds(center, size) {
    var n = google.maps.geometry.spherical.computeOffset(center, size.height / 2, 0).lat(),
      s = google.maps.geometry.spherical.computeOffset(center, size.height / 2, 180).lat(),
      e = google.maps.geometry.spherical.computeOffset(center, size.width / 2, 90).lng(),
      w = google.maps.geometry.spherical.computeOffset(center, size.width / 2, 270).lng();
  return new google.maps.LatLngBounds(new google.maps.LatLng(s, w),
      new google.maps.LatLng(n, e));
  }
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 12,
    center: new google.maps.LatLng(40.689055, -89.584747),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });



  var rectangle = new google.maps.Rectangle({
    strokeColor: '#000000',
    strokeOpacity: 1,
    strokeWeight: 1,
    fillColor: '#008000',
    fillOpacity: .2,
    editable: false,
    draggable: false,
    map: map,
    bounds: calcBounds(new google.maps.LatLngBounds(
        new google.maps.LatLng(40.626805, -89.539396),
        new google.maps.LatLng(40.626055, -89.538507)).getCenter(), new google.maps.Size(875, 875))
  });



  var rectangle = new google.maps.Rectangle({
    strokeColor: '#000000',
    strokeOpacity: 1,
    strokeWeight: 1,
    fillColor: '#008000',
    fillOpacity: .2,
    editable: false,
    draggable: false,
    map: map,
    bounds: calcBounds(new google.maps.LatLngBounds(
        new google.maps.LatLng(40.750555, -89.633655),
        new google.maps.LatLng(40.749805, -89.632766)).getCenter(), new google.maps.Size(875, 875))
  });



  var rectangle = new google.maps.Rectangle({
    strokeColor: '#000000',
    strokeOpacity: 1,
    strokeWeight: 1,
    fillColor: '#008000',
    fillOpacity: .2,
    editable: false,
    draggable: false,
    map: map,
    bounds: calcBounds(new google.maps.LatLngBounds(
        new google.maps.LatLng(40.626805, -89.519833),
        new google.maps.LatLng(40.626055, -89.518943)).getCenter(), new google.maps.Size(875, 875))
  });
  google.maps.event.addListener(map, 'click', function(event) {
    alert("Latitude: " + event.latLng.lat() + " " + ", longitude: " + event.latLng.lng());
  });

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

Here is an example

Any suggestions are appreciated, thanks!

Answer 1

You need to add a click event to each of your rectangles. For example:

 google.maps.event.addListener(rectangle, 'click', function( event ){
  alert( "Latitude: "+event.latLng.lat()+" "+", longitude: "+event.latLng.lng() ); 
 });  

Answer 2

You can attach a listener to the rectangle as you do for the map .

google.maps.event.addListener(rectangle, 'click', function(event) {
  alert('latitude: ' + event.latLng.lat() + ' , longitude: ' + event.latLng.lng()); 
});

Example here http://jsfiddle.net/0c9rnyf8/5/