javascript - 如何在谷歌地图中点击矩形时获取经纬度？

Question

我在 Google map 中创建了矩形，并希望在用户点击该矩形时在代码中获取纬度和经度。

当我在矩形外部单击时，我获得了纬度和经度。但是，当我单击矩形时，我无法获得纬度和经度。

这是我的代码:

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

感谢任何建议，谢谢!

Answer 1

您可以像为 map 一样将监听器附加到 rectangle 。

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

此处示例 http://jsfiddle.net/0c9rnyf8/5/