【问题标题】:How do I enlarge LatLngBounds box using LatLng data如何使用 LatLng 数据放大 LatLngBounds 框
【发布时间】:2015-02-24 19:52:07
【问题描述】:

我通过调用获取谷歌地图的当前边界:

map.getBounds()

这将返回 LatLngBounds。例如:

((-26.574013562724005, -1.5375947819336488), (-25.230016040794602, 3.735842718066351))

如果我想围绕地图中心将地图边界增加一个百分比(例如 1%),是否可以获得新的 LatLng 点。

我尝试将每个坐标乘以 1.01,但这会移动地图并且不会增加边界。

我想使用增加的框大小来开始缓存标记,以便在用户平移或缩小时保存对服务器的调用。

下图将更好地解释需要发生的事情:

【问题讨论】:

  • 最简单的选择是将缩放级别降低一 (map.setZoom(map.getZoom()-1)),除非您只是想在地图上绘制一个表示这些边界的框。
  • 我不想降低缩放级别,我想开始在当前缓存范围之外加载标记。
  • 请在您的问题中澄清这一点。
  • 100% 我已经添加了。
  • 你的照片不是你说的。您希望边界增加一个百分比,这会使 y 方向的增加量小于 x 方向,这不是您的图片显示的。您想将边界增加一个恒定的像素量(不是地理距离)吗?

标签: javascript html google-maps google-maps-api-3


【解决方案1】:

基于markerclusterer getExtendedBounds 函数,你可以使用这个:

function getExtendedBounds(map, overlay) {
    //With _mapBoundsEnlargePixels we add some extra space surrounding the map
    //change this value until you get the desired size
    var _mapBoundsEnlargePixels = 500;

    var projection = overlay.getProjection();
    var bounds = angular.copy(map.getBounds());

    // Turn the bounds into latlng.
    var tr = new google.maps.LatLng(bounds.getNorthEast().lat(),
        bounds.getNorthEast().lng());
    var bl = new google.maps.LatLng(bounds.getSouthWest().lat(),
        bounds.getSouthWest().lng());

    // Convert the points to pixels and extend out
    var trPix = projection.fromLatLngToDivPixel(tr);
    trPix.x = trPix.x + _mapBoundsEnlargePixels;
    trPix.y = trPix.y - _mapBoundsEnlargePixels;

    var blPix = projection.fromLatLngToDivPixel(bl);
    blPix.x = blPix.x - _mapBoundsEnlargePixels;
    blPix.y = blPix.y + _mapBoundsEnlargePixels;

    // Convert the pixel points back to LatLng
    var ne = projection.fromDivPixelToLatLng(trPix);
    var sw = projection.fromDivPixelToLatLng(blPix);

    // Extend the bounds to contain the new bounds.
    bounds.extend(ne);
    bounds.extend(sw);

    return bounds;
}

【讨论】:

  • 我最终采取了完全不同的方法,但这个答案仍然有用。谢谢!
  • 如果您能分享您的方法,那就太好了。
  • 是的,我也会对你的方法感兴趣,@Morne
猜你喜欢
  • 1970-01-01
  • 2015-06-15
  • 2017-10-25
  • 1970-01-01
  • 2013-02-25
  • 1970-01-01
  • 2012-05-24
  • 1970-01-01
  • 2018-12-22
相关资源
最近更新 更多