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

我认为问题与您通过信息框上的 htmlContent 选项使用自定义 HTML 内容有关。我看到您的自定义内容浮动到左侧。我不知道为什么，但是当您在 htmlContent 中使用 css 浮点数时，它似乎会导致 Bing 地图出现问题。我注释掉了左边的浮动，跳动的行为消失了。

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

至于鼠标离开没有被调用，它可能也与您的自定义 html 内容有关。尝试从一个简单的 div 开始，看看是否调用了鼠标离开。如果可行，与其依赖 CSS 来布置信息框，不如尝试使用表格。我知道您应该使用 css 进行布局，但是使用 bing 地图信息框，我发现无论出于何种原因，表格都能更好地工作。

于 2012-07-05T22:27:07.270 回答
0

我没有找到这种行为的原因。z-index但是，我改变了技术，通过仅使用 css (with and :hover) 而不是 Javascript来获得我想要的东西，并且效果很好。请参阅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 回答