0

マップ (Bing Maps AJAX v7) に、カスタム HTML コンテンツを含む複数のインフォボックスがあります。それらのいくつかは近くにあるため、インフォボックスが重なることがあります。

また、マウスがそれらのいずれかの上にあると、マウスが前景に来て、マウスが離れると（オプションで）背景に戻ると思います。

したがって、zIndexプロパティを使用して、次の行を追加しました。

Microsoft.Maps.Events.addHandler(infobox, 'mouseenter', function(e) {
  infobox.setOptions({zIndex : 300});
 });
Microsoft.Maps.Events.addHandler(infobox, 'mouseleave', function(e) {
  infobox.setOptions({zIndex : 0});
});

ただし、次の行では事態が奇妙になります。

  • マウスが入ると、インフォボックスは次のマップ再描画まで位置をジャンプします。
  • mouseleave コールバックは呼び出されません。

これを jsFiddle で再現しました: http://jsfiddle.net/wXFhy/7

なぜ、またはどのように考えている人はいますか？ありがとうございました ！

4

2 に答える 2

0

この動作の理由はわかりませんでした。ただし、Javascript ではなく css のみ (z-indexおよび:hover) を使用して必要なものを取得する手法を変更したところ、うまく機能しました。http://jsfiddle.net/wXFhy/8/を参照してください。

これらのcssプロパティを追加しました:

.FriendPinMap {
  float: left;
  position: absolute;
  z-index:0;
}

.FriendPinMap:hover {
  z-index:3;
}

そして、（ひどく）同等のことをしているJavaScriptを削除しました。

于 2012-07-06T08:52:46.713 に答える
0

この問題は、インフォボックスの htmlContent オプションを介してカスタム HTML コンテンツを使用していることに関係していると思います。カスタム コンテンツが左に浮いているように見えます。理由はわかりませんが、htmlContent で CSS フロートを使用すると、Bing マップで問題が発生するようです。左のフロートをコメントアウトすると、びくびくした動作がなくなりました。

http://jsfiddle.net/wXFhy/10/

マウスが呼び出されない場合は、おそらくカスタム html コンテンツにも関係しています。単純な div から開始して、マウスの leave が呼び出されるかどうかを確認してください。それが機能する場合は、情報ボックスのレイアウトを css に依存するのではなく、代わりにテーブルを使用してみてください。レイアウトには css を使用することになっていることは承知していますが、bing maps インフォボックスを使用すると、何らかの理由でテーブルの方がうまく機能することがわかりました。

于 2012-07-05T22:27:07.270 に答える