Question

我有一个侧边栏，显示谷歌地图当前地图视图中标记的名称。侧边栏内容随着地图移动而改变：

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来证明这个问题，如果它澄清了

Answer 1

如果有人后来发现这一点，我最终会重新计算边界 - 这似乎是涉及开销最小的方法。这是功能：

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);

分别指定你想要在地图的北，南，东和西边缘填充多少填充

添加填充到谷歌地图bounds.contains（）

1 个答案: