Question

我在屏幕中间有标记的地图。我也有一个带有＆＃34;允许＆＃34;的界限的圈子。用户拖动地图中心的区域。如果用户将地图拖到此圆圈之外，我需要显示错误消息。你能告诉我在下面的代码中我做错了吗？

我在此行中遇到错误：if (_latLngBounds.contains(event.latLng))因为event没有latLng参数。我不知道如何正确地获得当前位置的lat和lng。

＆＃13;

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&nbsp;', 51.805616, -0.192647, 2],
    ['STANMORE &nbsp;', 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);

＆＃13;

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

＆＃13;

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

＆＃13;

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是矩形的。如果你想检查一个圆内，它将是不准确的（矩形的角不是“在”圆圈，但在界限内），而是检查距离中心点的距离圆小于圆的半径。见Calculate Marker In Circle

代码段

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&nbsp;', 51.805616, -0.192647, 2],
    ['STANMORE &nbsp;', 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>

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

1 个答案: