I use the setHtmlContent to set the content of a infoBox. As per the documentation the infoBox is initially anchored at the top-left. If I move the map (even just a little bit) the infoBox jumps position. Its fine in IE8, but does it in FireFox and Chrome.
Does anybody have any idea/experience or any solutions in solving this?
Info boxes are added in the following way (for reference)...
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);
And then pushed to the map.
It seems that when you push an infobox on the map, its offset is a default one. And when the mapView changes, it gets updated with the right one ( (0,0) when htmlContent is set).
I was having the same issue in FF and Chrome. The fix I used was to listen to the viewendchange event and then resetting the infobox's location when the event dispatched. This works in IE7, IE8, IE9, FF, Chrome and Safari. Not ideal, but it works.
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 } );
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.