我正在使用Google Maps API的v3并使用InfoBox插件(http://google-maps-utility-library-v3.googlecode.com/套件的一部分)来制作一些设计精美的信息窗口对标记物相互作用有反应.
对于这个特定的实验,我试图在标记被盘旋出来时弹出InfoBox窗口,但是我很难在InfoBox窗口上解决有关鼠标悬停/鼠标移动的事件系统的问题.发生的事情是我可以找到DIV并使用a google.maps.event.addDomListener将mouseover和mouseout事件附加到InfoBox,除非它过于繁琐 - 当我将鼠标悬停在InfoBox中的子节点时,它将被视为父节点上的mouseout并触发事件.
这在某种程度上与传播有关吗？我知道InfoBox enableEventPropagation在创建一个新的InfoBox时有一个开关,但是我不太确定如何以及为什么要使用它.
该实验的目的是创建一个信息窗口,其中包含鼠标悬停在标记上方的相关链接.然后,您可以在信息窗口内移动鼠标并进行交互,当您将鼠标移出时,它将关闭信息窗口.我尝试了另一种方法,鼠标悬停在标记上会触发一个外部函数,该函数创建一个外部信息窗口元素,该元素已定位并具有自己的事件处理.这样可以正常工作,但是在地图顶部自定义信息窗口的分层意味着当您将鼠标悬停在另一个标记上时(在自定义信息窗口下),它无法为鼠标注册鼠标悬停.
这是我对InfoBox方法的尝试:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
<!--
#map {
width: 800px;
height: 600px;
margin: 50px auto;
}
.map-popup {
overflow: visible;
display: block;
}
.map-popup .map-popup-window {
background: #fff;
width: 300px;
height: 140px;
position: absolute;
left: -150px;
bottom: 20px;
}
.map-popup .map-popup-content {
padding: 20px;
text-align: center;
color: #000;
font-family: 'Georgia', 'Times New Roman', serif;
}
-->
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox_packed.js"></script>
<script …