Question

我使用setHtmlContent来设置infoBox的内容。根据文档，infoBox最初锚定在左上角。如果我移动地图（即使只是一点点），infoBox会跳转位置。它在IE8中很好，但在FireFox和Chrome中都可以。

有没有人有任何想法/经验或任何解决方案？

以下列方式添加信息框（供参考）......

var infoboxOptions = { width: 300, height: 150, htmlContent: html, showCloseButton: true, zIndex: 99, offset: new Microsoft.Maps.Point(0, 0), showPointer: true, visible: false };
var location = new Microsoft.Maps.Location(pinArray[i].DPLat, pinArray[i].DPLong)
infobox = new Microsoft.Maps.Infobox(location, infoboxOptions);

然后推到地图上。

Answer 1

我在FF和Chrome中遇到了同样的问题。我使用的修复是收听 viewendchange 事件，然后在调度事件时重置信息框的位置。这适用于IE7，IE8，IE9，FF，Chrome和Safari。不理想，但它有效。

function showInfoBox( event ) {
    var
        location = event.target.getLocation(), // event from pushpin click
        map = this.map, // my map reference
        _that = this
    ;

    // create the infobox
    var infoboxOptions = { width: 300, height: 150, htmlContent: html, showCloseButton: true, zIndex: 99, offset: new Microsoft.Maps.Point(0, 0), showPointer: true, visible: false };
    this._infoBox = new Microsoft.Maps.Infobox( location , infoboxOptions );
    map.entities.push( this._infoBox );

    // local function to reset our position
    function updateInfoboxLocation() {
        _that._infoBox.setLocation( location );
    }

    // reset only on new display of a box, this fixes the other issues of a user moving
    // the box and it being offset
    if( this._infoEventId ) Microsoft.Maps.Events.removeHandler( this._infoEventId );

    // listen for the end event, update location
    this._infoEventId = Microsoft.Maps.Events.addHandler(map, 'viewchangeend', updateInfoboxLocation);

    // center the view on the pin location
    map.setView( { center: location } );
}

Answer 2

当您在地图上按下信息框时，它的偏移似乎是默认的。当mapView发生变化时，它会更新正确的（当设置了htmlContent时为（0,0））。

移动地图时，Bing Maps InfoBox会移动FireFox和Chrome中的位置

2 个答案: