Bing displays infobox with scrolls

Question

I'm trying to make sure that the contents inside the pop-up pop-up window pops up so that all the information is displayed, but when I try to scroll using the scroll bar when releasing the mouse button, the map adheres to this point, as if holding and panning. Here is the code to play:

var location = new Microsoft.Maps.Location(0, 0); var html = "title<br/>description desc desc" + " description desc desc description desc desc" + " description desc desc description desc desc" + " description desc desc description desc desc" + " description desc desc description desc desc" ; var popupHTML = '<div style="height: 50px; width: 100px; overflow: auto; background: white;">{content}</div>'; var options = { htmlContent: popupHTML.replace('{content}', html), visible: true, }; var popup = new Microsoft.Maps.Infobox(location, options); map.entities.push(popup); 

or, alternatively, paste the following into the Bing maps SDK in the infobox section:

  map.entities.clear(); var infoboxOptions = {title:'Infobox Title', description:'<div style="height:20px; overflow: auto;">Infobox description description description description description description description description description description description description description description description description description description description<div>'}; var defaultInfobox = new Microsoft.Maps.Infobox(map.getCenter(), infoboxOptions ); map.entities.push(defaultInfobox); 

Then try scrolling down, and when you release, the map will depend on this position, as if you are holding and panning.

Any suggestions are welcome, thanks!

Answer 1

You must disable the default event handlers!

Try to do something like the following in your creation of the info box:

 map.infobox = new Microsoft.Maps.Infobox(center, infoboxOptions); map.moveHandler = Microsoft.Maps.Events.addHandler(map, 'mousemove', function (e) { e.handled = true;}); map.wheelHandler = Microsoft.Maps.Events.addHandler(map, 'mousewheel', function (e) { e.handled = true;}); Microsoft.Maps.Events.addHandler(map, 'click', function(e) { if (map.infobox) {map.entities.remove(map.infobox); map.infobox = false; Microsoft.Maps.Events.removeHandler(map.moveHandler); Microsoft.Maps.Events.removeHandler(map.wheelHandler); map.moveHandler = false; map.wheelHandler = false}}); 

Answer 2

I know that I was a bit late for the party, but I had the same problem, and I decided to use it using the built-in events.

Cause

Through many registration statements in various event handlers, I found that the problem occurs because the mousedown event occurs on the map, but the scrollbar somehow prevents the mouseup event from leaving the map draggable.

Decision

When the map is initialized, I add event handlers for the mouseDown event on the map.

 Microsoft.Maps.Events.addHandler(map, 'mousedown', map_mousedown); 

For the display box, I add event handlers for the mouseenter , mouseleave and entitychanged .

 Microsoft.Maps.Events.addHandler(infobox, 'mouseenter', infobox_mouseenter); Microsoft.Maps.Events.addHandler(infobox, 'mouseleave', infobox_mouseleave); Microsoft.Maps.Events.addHandler(infobox, 'entitychanged', infobox_entitychanged); 

In the mouseenter and mouseleave event handlers, I set a value that indicates whether the mouse pointer is over the info boxes, and reset it uses entitychanged when closing the info box.

 var overInfobox = false; function infobox_mouseenter(event) { overInfobox = true; } function infobox_mouseleave(event) { overInfobox = false; } function infobox_entitychanged(event) { overInfobox = false; } 

In the mousedown event handler for the map, this value is considered. If so, then the default action for the event (which drags the map) is prevented.

 function map_mousedown(event) { if (overInfobox) event.handled = true; } 

Thus, when a mouse click something inside the infobox, it will not affect the map. The scrollbars will work, and you can drag the map outside the info box (and when you close the info box, use the X in the upper corner).

Answer 3

You can apply this css to the parent div of your html code:

  <style> .infobox{ border: 1px solid #777 ; font: 11px ; width: 95%; margin:auto; min-height: 3em; max-height: 18em; overflow: auto; padding: 5px; } </style>