包含的点是否比地图边界多一点？

Question

很容易检查一个点（例如标记）是否在地图的当前边界内：

map.getBounds().contains(marker.getPosition())

是否有一种自然的方法来检查一个点是否在地图当前边界内，每边放大 10% ？

Answer 1

一个选项（您也可以沿对角线扩展边界）：

1. 在“bounds_changed”事件上使用google.maps.event.addDomListenerOnce 首次设置边界时捕获边界。
2. 在每个方向（N、S、E、W）上将其扩展 10%。
3. 创建一个新的google.maps.LatLngBounds 对象
4. 为.contains 检查使用新的“扩展”边界。

google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
  var initBounds = map.getBounds();
  var initRect = new google.maps.Rectangle({
    map: map,
    bounds: initBounds,
    fillOpacity: 0.4,
    fillColor: 'red'
  });
  // extend bounds
  var newN = google.maps.geometry.spherical.computeOffset(initBounds.getCenter(),
    1.1 * google.maps.geometry.spherical.computeDistanceBetween(initBounds.getCenter(), new google.maps.LatLng(initBounds.getNorthEast().lat(), initBounds.getCenter().lng())), 0).lat();
  var newS = google.maps.geometry.spherical.computeOffset(initBounds.getCenter(),
    1.1 * google.maps.geometry.spherical.computeDistanceBetween(initBounds.getCenter(), new google.maps.LatLng(initBounds.getSouthWest().lat(), initBounds.getCenter().lng())), 180).lat();
  var newE = google.maps.geometry.spherical.computeOffset(initBounds.getCenter(),
    1.1 * google.maps.geometry.spherical.computeDistanceBetween(initBounds.getCenter(), new google.maps.LatLng(initBounds.getCenter().lat(), initBounds.getNorthEast().lng())), 90).lng();
  var newW = google.maps.geometry.spherical.computeOffset(initBounds.getCenter(),
    1.1 * google.maps.geometry.spherical.computeDistanceBetween(initBounds.getCenter(), new google.maps.LatLng(initBounds.getCenter().lat(), initBounds.getSouthWest().lng())), -90).lng();
  var expandedBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(newS, newW),
    new google.maps.LatLng(newN, newE)
  );
  var expRect = new google.maps.Rectangle({
    map: map,
    bounds: expandedBounds,
    fillOpacity: 0.4,
    fillColor: 'blue'
  });
});

proof of concept fiddle

代码 sn-p：

var geocoder;
var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
    var initBounds = map.getBounds();
    var initRect = new google.maps.Rectangle({
      map: map,
      bounds: initBounds,
      fillOpacity: 0.4,
      fillColor: 'red'
    });
    // extend bounds
    var newN = google.maps.geometry.spherical.computeOffset(initBounds.getCenter(),
      1.1 * google.maps.geometry.spherical.computeDistanceBetween(initBounds.getCenter(), new google.maps.LatLng(initBounds.getNorthEast().lat(), initBounds.getCenter().lng())), 0).lat();
    var newS = google.maps.geometry.spherical.computeOffset(initBounds.getCenter(),
      1.1 * google.maps.geometry.spherical.computeDistanceBetween(initBounds.getCenter(), new google.maps.LatLng(initBounds.getSouthWest().lat(), initBounds.getCenter().lng())), 180).lat();
    var newE = google.maps.geometry.spherical.computeOffset(initBounds.getCenter(),
      1.1 * google.maps.geometry.spherical.computeDistanceBetween(initBounds.getCenter(), new google.maps.LatLng(initBounds.getCenter().lat(), initBounds.getNorthEast().lng())), 90).lng();
    var newW = google.maps.geometry.spherical.computeOffset(initBounds.getCenter(),
      1.1 * google.maps.geometry.spherical.computeDistanceBetween(initBounds.getCenter(), new google.maps.LatLng(initBounds.getCenter().lat(), initBounds.getSouthWest().lng())), -90).lng();
    var expandedBounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(newS, newW),
      new google.maps.LatLng(newN, newE)
    );
    var expRect = new google.maps.Rectangle({
      map: map,
      bounds: expandedBounds,
      fillOpacity: 0.4,
      fillColor: 'blue'
    });
  });
}
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?libraries=geometry"></script>
<div id="map_canvas"></div>

Answer 2

终于用上了：

var bnd = map.getBounds();
var bnd2 = new google.maps.LatLngBounds(
    new google.maps.LatLng(1.1 * bnd.H.H - 0.1 * bnd.H.j, 1.1 * bnd.j.j - 0.1 * bnd.j.H),
    new google.maps.LatLng(1.1 * bnd.H.j - 0.1 * bnd.H.H, 1.1 * bnd.j.H - 0.1 * bnd.j.j)
);
bnd2.contains(marker.getPosition())