Question

我的地图（Bing Maps AJAX v7）上有多个带有自定义HTML内容的信息框。由于其中一些是接近的，因此信息框有时会重叠。

另外，我希望，当鼠标超过其中一个时，它会到达前景，并且（optionnaly）在鼠标离开时返回到背景。

因此，通过使用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

有没有人对于为什么或如何有任何想法？谢谢！

Answer 1

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

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

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

Answer 2

我没有找到这种行为的原因。但是，我改变了技术以通过仅使用css（使用z-index和:hover）而不是Javascript来获得我想要的东西，并且效果很好。请参阅http://jsfiddle.net/wXFhy/8/。

我添加了这些css属性：

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

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

并删除了javascript（严重）等效。

在鼠标悬停时更改z索引以显示重叠的信息框

2 个答案: