信息框仍然从视图 Bing 地图中流出

Question

我试图做到这一点，以便当用户点击地图上的一个大头针时，它会以该大头针为中心，但如果信息框太高并且离开视图，那么它将重新调整以偏移地图上的部分.这是代码，但似乎并非每次都能正常工作。某些信息框仍在屏幕外流动，并且 dy 正在警告返回 0。所以这里是代码：

//Displaying and hiding infobox
function displayInfobox(e) {
    if (e.targetType == 'pushpin') {
        infobox.setLocation(e.target.getLocation());
        infobox.setOptions({
            visible: true,
            title: e.target.Title,
            description: e.target.htmlContent,
            width: 250,
            offset: new MM.Point(-3, 0)
        });
        //centering map on pushpin
        var pinLocation = e.target.getLocation();

        map.setView({
            center: pinLocation
        });


        infoBoxOrigHeight = $('.Infobox').outerHeight();
        infoBoxHeight = $('.Infobox .infobox-body').outerHeight();

        var stalkHeight = $('.infobox-stalk').outerHeight();

        var newOffset = (infoBoxHeight - infoBoxOrigHeight) + stalkHeight;

        $('.Infobox').css({
            'height': infoBoxHeight,
                'top': -newOffset
        });


        $('.Infobox').css('height', infoBoxHeight);

        $('.infobox-stalk').css('top', infoBoxHeight);


        var buffer = 100;
        var infoboxOffset = infobox.getOffset();
        var infoboxAnchor = infobox.getAnchor();
        var infoboxLocation = map.tryLocationToPixel(e.target.getLocation(), Microsoft.Maps.PixelReference.control);
        var dx = infoboxLocation.x + infoboxOffset.x - infoboxAnchor.x;
        var dy = infoboxLocation.y - 100 - infoboxAnchor.y;

        if (dy < buffer) { //Infobox overlaps with top of map.
            //Offset in opposite direction.
            dy *= -1;
            //add buffer from the top edge of the map.
            dy += buffer;
        } else {
            //If dy is greater than zero than it does not overlap.
            dy = 0;
        }

        if (dx < buffer) { //Check to see if overlapping with left side of map.
            //Offset in opposite direction.
            dx *= -1;
            //add a buffer from the left edge of the map.
            dx += buffer;

        } else { //Check to see if overlapping with right side of map.
            dx = map.getWidth() - infoboxLocation.x + infoboxAnchor.x - infobox.getWidth();
            //If dx is greater than zero then it does not overlap.
            if (dx > buffer) {
                dx = 0;
            } else {
                //add a buffer from the right edge of the map.
                dx -= buffer;
            }
        }
        //Adjust the map so infobox is in view
        alert('dx: ' + dx + ' dy: ' + dy);
        if (dx != 0 || dy != 0) {
            map.setView({
                centerOffset: new Microsoft.Maps.Point(dx, dy),
                center: map.getCenter()
            });
        }
    }
}

只是想知道我实施的错误是什么，这没有按应有的方式工作？

Answer 1

我已经为此做了一个 bing 地图模块。你可以检查它here。您可以查看使用示例here。

模块的相关代码如下：

var infobox = this;
var mapWidth = _map.getWidth();
var mapHeight = _map.getHeight();

var point = _map.tryLocationToPixel(infobox.getLocation());

var remainderX = (mapWidth / 2) - point.x;
var remainderY = (mapHeight / 2) + point.y;

//Empirical values based on the current infobox implementation
var xExtraOffset = 33;
var yExtraOffset = 37;

var pixelsOutsideX = infobox.getWidth() + infobox.getOffset().x - remainderX - xExtraOffset + _options.horizontalPadding;
var pixelsOutsideY = infobox.getHeight() + infobox.getOffset().y + yExtraOffset - remainderY + _options.verticalPadding;

var newPoint = new Microsoft.Maps.Point(0, 0);

if (pixelsOutsideX > 0) {
    newPoint.x += pixelsOutsideX;
}

if (pixelsOutsideY > 0) {
    newPoint.y -= pixelsOutsideY;
}

var newLocation = _map.tryPixelToLocation(newPoint);

_map.setView({
    center: new Microsoft.Maps.Location(newLocation.latitude, newLocation.longitude)
});