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

您必須禁用默認事件處理程序！

嘗試類似的東西在你的信息框創作FUNC如下：

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

你可以這個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> 

Answer 3

我知道我有點這裏的派對遲到了，但我遇到了同樣的問題，並使用內置事件解決了問題。

原因

通過很多各種事件處理日誌報表，我發現了出現問題的原因是mousedown事件發生在地圖上，但滾動條莫名其妙地防止mouseup事件的發生，離開地圖被拖動。

解決方案

在地圖初始化，我添加事件處理在地圖上的鼠標按下事件。

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和鼠標離開事件處理器，我設置指示該鼠標在信息框的值，並重置在信息框關閉使用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關閉信息框時）。