用户拖动地图后如何检查地图中心是否在圆形区域内？

Question

我在屏幕中间有带有标记的地图。 我还有一个带有“允许”区域边界的圆圈，供用户在其中拖动地图的中心。 如果用户将地图拖到此圈外，我需要显示错误消息。 你能告诉我我在下面的代码中做错了什么吗？

我在这一行出现错误：if (_latLngBounds.contains(event.latLng)) 因为event 没有latLng 参数。我不知道如何正确获取当前位置的 lat 和 lng。

var map;

function initialize() {

  var _latitudeLongitude = new window.google.maps.LatLng(51.805616, -0.192647);

  var circle = new window.google.maps.Circle({
      center: _latitudeLongitude,
      radius: 50000
  });

  var _latLngBounds = circle.getBounds();

  var locations = [
    ['WELWYN GARDEN CITY ', 51.805616, -0.192647, 2],
    ['STANMORE  ', 51.603199, -0.296803, 1]
  ];

  map = new google.maps.Map(document.getElementById('map_canvas'), {
    navigationControl: true,
    scrollwheel: false,
    scaleControl: false,
    draggable: true,
    zoom: 10,
    center: new google.maps.LatLng(51.75339, -0.210114),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var marker, i;

  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map,
      zIndex: 10
    });

    window.google.maps.event.addListener(map , 'drag', function (event) {
            marker.setPosition( map.getCenter() );

            if (_latLngBounds.contains(event.latLng)) {
                // everything is fine
            } else {
                alert('outside of the boundaries');
            }

    });

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

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

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

Answer 1

根据the documentation，拖动事件没有任何参数（也是 dragend 事件）。

活动

拖动 |参数：无 |当用户拖动地图时，会重复触发此事件。

您需要获得地图的中心（通过调用map.getCenter()）。

window.google.maps.event.addListener(map, 'drag', function() {
  marker.setPosition(map.getCenter());

  if (_latLngBounds.contains(map.getCenter())) {
    // everything is fine
  } else {
    alert('outside of the boundaries');
  }

});

注意： LatLngBounds 是矩形的。如果你想检查一个圆圈内，它不会是准确的（矩形的角不是“在”圆圈内，而是在边界内），而是检查从中心到点的距离circle 小于圆的半径。见Calculate Marker In Circle

代码 sn-p：

var map;

function initialize() {

  var _latitudeLongitude = new window.google.maps.LatLng(51.805616, -0.192647);

  var circle = new window.google.maps.Circle({
    center: _latitudeLongitude,
    radius: 50000
  });

  var _latLngBounds = circle.getBounds();

  var locations = [
    ['WELWYN GARDEN CITY ', 51.805616, -0.192647, 2],
    ['STANMORE  ', 51.603199, -0.296803, 1]
  ];

  map = new google.maps.Map(document.getElementById('map_canvas'), {
    navigationControl: true,
    scrollwheel: false,
    scaleControl: false,
    draggable: true,
    zoom: 10,
    center: new google.maps.LatLng(51.75339, -0.210114),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var marker, i;

  for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map,
      zIndex: 10
    });

    window.google.maps.event.addListener(map, 'drag', function() {
      marker.setPosition(map.getCenter());

      if (_latLngBounds.contains(map.getCenter())) {
        // everything is fine
      } else {
        alert('outside of the boundaries');
      }

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

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

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