带有InfoBox插件的Google Maps API v3 Event mouseover [英] Google Maps API v3 Event mouseover with InfoBox plugin
问题描述
我正在使用Google Maps API v3，并使用InfoBox插件（ http://google-maps-utility-library-v3.googlecode.com/ 套件），以便制作一些很好的样式信息窗口，以响应标记交互。
对于这个特定的实验，我试图在标记被悬空和悬停时弹出InfoBox窗口，但是我一直在努力解决事件系统的问题在InfoBox窗口上的鼠标悬停/鼠标悬停。会发生什么是我可以找到DIV并使用 google.maps.event.addDomListener 将鼠标悬停和鼠标悬停事件附加到信息框，除非它过于频繁 - 当我将鼠标悬停在InfoBox中的一个子节点上，它将在父节点上计算为鼠标移动并触发事件。
这是否与传播有关？我知道InfoBox在创建一个新的InfoBox时有一个 enableEventPropagation 开关，但我不太清楚如何以及为何使用它。
实验的目的是创建一个信息窗口，其中包含相关链接，该信息出现在标记的mouseover上。然后，您可以在信息窗口中移动鼠标并进行交互，当您将鼠标移出时，它将关闭信息窗口。我已经尝试了另一种方法，其中标记上的mouseover触发外部函数，该函数创建一个定位的外部信息窗口元素并具有其自己的事件处理。这很好，但是自定义信息窗口在地图顶部的分层意味着当你将鼠标放在靠近另一个标记（在自定义信息窗口下）时，它不能注册标记的鼠标悬停。
这是我在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;
位置：绝对;剩余
：-150px;
bottom：20px;
}
.map-popup .map-popup-content {
padding：20px;
text-align：center;
颜色：＃000;
font-family：'Georgia'，'Times New Roman'，衬线;
}
- >
< / style>
< script type =text / javascriptsrc =http://maps.google.com/maps/api/js?sensor=false>< / script>
< script type =text / javascriptsrc =http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox_packed.js><<< ; /脚本>
< script type =text / javascript>
var gmap，gpoints = [];
函数initialize（）{
gmap = new google.maps.Map（document.getElementById（'map'），{
zoom：9，
streetViewControl： false，
scaleControl：false，
center：new google.maps.LatLng（-38.3000000,144.9629796），
mapTypeId：google.maps.MapTypeId.ROADMAP
}）; （var i = 0; i <5; i ++）{
gpoints.push（new point（gmap））;
函数popup（_point）{
_point.popup = new InfoBox（{
content：_point.content，
窗格：'floatPane'，
closeBoxURL：''，
alignBottom：1
}）;
_point.popup.open（_point.marker.map，_point.marker）;
google.maps.event.addListener（_point.popup，'domready'，function（）{
//必须将其放在domready中，否则它无法找到div元素（在InfoBox被打开之前它是空的）
google.maps.event.addDomListener（_point.popup.div_，'mouseout'，function（）{
_point.popup.close（）;
}）;
}）;
功能点（_map）{
this.marker = new google.maps.Marker（{
position：new google.maps.LatLng（-37.8131869 - （1 * Math.random（）），144.9629796 +（1 * Math.random（））），
map：_map
}）;
$ b $ this.content ='< div class =map-popup>< div class =map-popup-window>< div class =map-popup-content >< a href =http://www.google.com/>只需点击我！< / a>< br />将鼠标悬停在此文字上会产生< code> ;鼠标移开< /代码>在< code>地图 - 弹出式窗口< / code>上触发事件元素，这会消失。< / div>< / div>';
//范围
var gpoint = this;
//活动
google.maps.event.addListener（gpoint.marker，'mouseover'，function（）{
popup（gpoint）;
}） ;
}
< / script>
< / head>
< body onload =initialize（）>
< div id =map>< / div>
< / body>
< / html>
因此，我猜如果有人知道如何做到这一点并做出正确回应（或提供相关提示/技巧）那就太好了！
我有同样的问题。就像你说的那样，问题在于当移动到其中一个子元素时触发了鼠标移出。解决方法是改为使用mouseenter和mouseleave（需要jQuery），请参阅此帖以获取更多信息：悬停，mouseover和mouse out
在这种情况下，不能使用google maps事件侦听器（它不支持mouseenter）。相反，您可以附加一个正常的jQuery事件，或使用悬停功能，如下面的代码所示：
google.maps.event .addListener（_point.popup，'domready'，function（）{
//必须将其放在domready中，否则它无法找到div元素（在InfoBox打开之前它是空的）
$（_ point.popup.div _）。hover（
function（）{
//当鼠标进入元素
}，
函数时调用（）{
//当鼠标离开元素
_point.popup.close（）;
}
）;
}）时调用它;
I'm mucking around with v3 of the Google Maps API and using the InfoBox plugin (part of the http://google-maps-utility-library-v3.googlecode.com/ suite) in conjunction to make some nicely styled info windows that react to marker interactions.
For this particular experiment, I've attempted to get the InfoBox window pop-up when the marker has been hovered over and out, however I've struggled to resolve the issue with the event system regarding mouseover/mouseout on the InfoBox window. What happens is that I can locate the DIV and use a google.maps.event.addDomListener to attach a mouseover and mouseout event to the InfoBox, except it's too fiddly -- when I mouseover a child node within the InfoBox, it counts as a mouseout on the parent node and fires the event.
Is this somehow related to propagation? I know InfoBox has a enableEventPropagation switch when you create a new InfoBox, but I'm not quite sure how and why it would be used.
The aim of the experiment is to create an info window with related links inside that appears on mouseover of the marker. You can then move the mouse inside the info window and interact and when you mouse out it will close the info window. I've tried another method where the mouseover on the marker triggers an external function that creates an external info window element that's positioned and has its own event handling. That works fine, but the layering of the custom info window on top of the map means that when you mouse over another marker in close proximity (under the custom info window) it can't register the mouseover for the marker.
This was my attempt at the InfoBox method:
<!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 type="text/javascript">
var gmap, gpoints = [];
function initialize() {
gmap = new google.maps.Map(document.getElementById('map'), {
zoom: 9,
streetViewControl: false,
scaleControl: false,
center: new google.maps.LatLng(-38.3000000,144.9629796),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
for ( var i=0; i<5; i++ ) {
gpoints.push( new point(gmap) );
}
}
function popup(_point) {
_point.popup = new InfoBox({
content: _point.content,
pane: 'floatPane',
closeBoxURL: '',
alignBottom: 1
});
_point.popup.open(_point.marker.map, _point.marker);
google.maps.event.addListener(_point.popup, 'domready', function() {
// Have to put this within the domready or else it can't find the div element (it's null until the InfoBox is opened)
google.maps.event.addDomListener(_point.popup.div_, 'mouseout', function() {
_point.popup.close();
});
});
}
function point(_map) {
this.marker = new google.maps.Marker({
position: new google.maps.LatLng(-37.8131869 - (1 * Math.random()),144.9629796 + (1 * Math.random())),
map: _map
});
this.content = '<div class="map-popup"><div class="map-popup-window"><div class="map-popup-content"><a href="http://www.google.com/">Just try to click me!</a><br/>Hovering over this text will result in a <code>mouseout</code> event firing on the <code>map-popup</code> element and this will disappear.</div></div>';
// Scope
var gpoint = this;
// Events
google.maps.event.addListener(gpoint.marker, 'mouseover', function() {
popup(gpoint);
});
}
</script>
</head>
<body onload="initialize()">
<div id="map"></div>
</body>
</html>
So I guess if anyone knows how to make this work and respond properly (or provide relevant tips/tricks) then that would be great!
I have had the same problem. Just as you say the issue is that mouseout is triggered when moving to one of the child elements. The solution is to instead use mouseenter and mouseleave (jQuery needed), see this post for more information: Hover, mouseover and mouse out
In this case it is not possible to use the google maps event listener (it does not support mouseenter). Instead you can attach a normal jQuery event, or use the hover function as shown in the following code:
google.maps.event.addListener(_point.popup, 'domready', function() {
//Have to put this within the domready or else it can't find the div element (it's null until the InfoBox is opened)
$(_point.popup.div_).hover(
function() {
//This is called when the mouse enters the element
},
function() {
//This is called when the mouse leaves the element
_point.popup.close();
}
);
});
这篇关于带有InfoBox插件的Google Maps API v3 Event mouseover的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
