0

ユーザーが地図上のピンをクリックすると、そのピンが中心になるようにしようとしていましたが、インフォボックスが高すぎてビューから外れると、地図から離れた部分のオフセットに再調整されます。これはコードですが、毎回正しく動作しないようです。特定のインフォボックスがまだ画面からはみ出しており、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()
            });
        }
    }
}

これが正常に機能していないという間違った実装をしているのだろうか？

4

1 に答える 1

0

私はまさにそのためにbing mapsモジュールを作成しました。ここで確認できます。使用例はこちらで確認できます。

モジュールの関連コードは次のとおりです。

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)
});
于 2013-10-17T17:58:50.107 に答える