带有滚动条的 bing 地图信息框

Question

我正在尝试确保信息框弹出窗口中的内容滚动，以便显示所有信息，但是当我尝试使用滚动条在释放鼠标按钮时滚动时，地图会像按住并平移一样粘在这一点上。以下是一些要重现的代码：

    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);

或者将以下内容粘贴到 Bing 地图 SDK 的信息框部分下：

    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);

然后尝试向下滚动，当您松开时，地图将卡在该位置，就像您按住并平移一样。

欢迎提出任何建议， 谢谢！

Answer 1

您必须禁用默认事件处理程序！

在您的信息框创建函数中尝试以下操作：

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

我知道我在这里聚会有点晚了，但我遇到了同样的问题，并使用内置事件解决了它。

原因

通过各种事件处理程序中的很多日志语句，我发现问题的发生是因为地图上发生了mousedown 事件，但滚动条以某种方式阻止了mouseup 事件发生，地图被拖拽。

解决办法

地图初始化后，我为地图上的 mouseDown 事件添加事件处理程序。

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

对于显示框，我为mouseenter、mouseleave 和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);

在 mouseenter 和 mouseleave 事件处理程序中，我设置了一个值，指示鼠标是否在信息框上方，并在信息框关闭时使用 entitychanged 重置它。

var overInfobox = false;

function infobox_mouseenter(event) {
    overInfobox = true;
}

function infobox_mouseleave(event) {
    overInfobox = false;
}

function infobox_entitychanged(event) {
    overInfobox = false;
}

在地图的 mousedown 事件处理程序中，会检查此值。如果为真，则阻止事件的默认操作（即拖动地图）。

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

这样，当鼠标点击信息框内的东西时，它不会影响地图。滚动条将起作用，您可以将地图拖出信息框（当您关闭信息框时使用右上角的X）。

Answer 3

您可以将此 css 应用到您的 html 代码的 div 父级：

  <style>
    .infobox{

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