我有一个侧边栏,显示谷歌地图当前地图视图中的标记名称。侧边栏内容随着地图的移动而变化:
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() 非常严格 - 如果标记的底部尖端位于地图上(即,您看不到它的 99%),它就会列在侧边栏上。我想要的是让完全显示的标记通过该测试。
我能想到几种方法,我不敢相信没有其他人遇到过这个问题,所以我想知道是否有以下几种方法:
- 获取边界并重新计算它们以使其小于实际边界,然后将这些新边界用于bounds.contains() 测试
- 计算标记图标的边缘在哪里(我猜使用
fromDivPixelToLatLng
)然后检查 ne 和 sw 角是否都在边界内,如果是,则列出该项目
在你问之前,我还没有尝试过其中任何一个 - 我更多地寻求关于哪一个最好甚至可能的建议,或者是否有其他方法可以做到这一点。这是一个fiddle https://jsfiddle.net/xelawho/e280jbte/2/演示这个问题,以防它澄清
万一后来有人发现这一点,我最终重新计算了界限——这似乎是开销最小的方法。这是函数:
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);
指定地图的北边、南边、东边和西边分别需要多少内边距
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)