gpt4 book ai didi

javascript - 添加填充到谷歌地图 bounds.contains()

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:56:36 26 4
gpt4 key购买 nike

我有一个侧边栏,它显示了谷歌地图当前 map View 中标记的名称。边栏内容随着 map 的移动而变化:

google.maps.event.addListener(map, 'bounds_changed', function() {
document.getElementById("list").innerHTML = "";
var mklen = mkrs.length,
a = 0,
bnds = map.getBounds();

for (a; a < mklen; a++) {
var themk = mkrs[a];
if (bnds.contains(themk.getPosition())) {
var myli = document.createElement("li");
myli.innerHTML = themk.title;
document.getElementById("list").appendChild(myli);
}
}
});

这工作正常,但问题是 bounds.contains() 非常严格 - 如果 map 上只有标记的底部尖端(即,您看不到它的 99%),它就会被列出在边栏上。我想要的是让完全显示的标记通过该测试。

我可以想到几种方法,我不敢相信没有其他人遇到过这个问题,所以我想知道是否有以下偏好:

  1. 获取边界并重新计算它们以使其小于实际边界并将这些新边界用于 bounds.contains() 测试
  2. 计算标记图标的边缘位置(我猜使用 fromDivPixelToLatLng)然后检查 ne 和 sw Angular 是否都在边界内,如果是,列出该项目

在您提出问题之前,我还没有尝试过其中任何一个 - 我更多地是在寻求建议,以了解哪种方法最好或什至可能,或者是否有其他方法可以做到这一点。这是一个 fiddle演示问题,以防它澄清

最佳答案

以防万一以后有人发现这一点,我最终重新计算了边界——这似乎是涉及最少开销的方法。这是函数:

function paddedBounds(npad, spad, epad, wpad) {
var SW = map.getBounds().getSouthWest();
var NE = map.getBounds().getNorthEast();
var topRight = map.getProjection().fromLatLngToPoint(NE);
var bottomLeft = map.getProjection().fromLatLngToPoint(SW);
var scale = Math.pow(2, map.getZoom());

var SWtopoint = map.getProjection().fromLatLngToPoint(SW);
var SWpoint = new google.maps.Point(((SWtopoint.x - bottomLeft.x) * scale) + wpad, ((SWtopoint.y - topRight.y) * scale) - spad);
var SWworld = new google.maps.Point(SWpoint.x / scale + bottomLeft.x, SWpoint.y / scale + topRight.y);
var pt1 = map.getProjection().fromPointToLatLng(SWworld);

var NEtopoint = map.getProjection().fromLatLngToPoint(NE);
var NEpoint = new google.maps.Point(((NEtopoint.x - bottomLeft.x) * scale) - epad, ((NEtopoint.y - topRight.y) * scale) + npad);
var NEworld = new google.maps.Point(NEpoint.x / scale + bottomLeft.x, NEpoint.y / scale + topRight.y);
var pt2 = map.getProjection().fromPointToLatLng(NEworld);

return new google.maps.LatLngBounds(pt1, pt2);
}

你可以这样调用它:

var padbnds = paddedBounds(50, 70, 100, 30);

分别指定 map 的北边、南边、东边和西边的填充量

关于javascript - 添加填充到谷歌地图 bounds.contains(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34894732/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com