4

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

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

或者将以下内容粘贴到信息框部分下的必应地图 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);

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

欢迎任何建议，谢谢！

4

3 回答 3

3

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

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

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}});
于 2012-10-12T14:23:54.887 回答
3

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

原因

通过各种事件处理程序中的大量日志记录语句，我发现问题的发生是因为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右上角的关闭信息框时）。

于 2015-08-19T13:25:21.613 回答
0

您可以将此 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>
于 2014-10-14T13:52:23.710 回答