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

または、以下を Bing maps SDK の infobox セクションに貼り付けます。

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

マップのマウスダウン イベント ハンドラで、この値が調べられます。true の場合、イベントのデフォルト アクション (マップのドラッグ) が防止されます。

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 に答える