原因

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事件处理程序中，将检查此值。如果为true，则阻止事件的默认操作（拖动地图）。

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>

bing使用滚动条映射信息框

3 个答案:

原因

解决方案