Ich spiele mit der Version 3 der Google Maps API herum und verwende das InfoBox-Plugin (Teil des http://google-maps-utility-library-v3.googlecode.com/ Suite) zusammen, um einige schön gestaltete Infofenster zu erstellen, die auf Marker-Interaktionen reagieren.
Für dieses spezielle Experiment habe ich versucht, das InfoBox-Fenster Pop-up zu erhalten, wenn die Markierung über und aus schwebte, aber ich habe gekämpft, um das Problem mit dem Ereignissystem in Bezug auf Mouseover/Mouseout auf das InfoBox-Fenster zu lösen. Was passiert, ist, dass ich das DIV lokalisieren kann und mit einem google.maps.event.addDomListener um ein Mouseover- und Mouseout-Ereignis an die InfoBox anzuhängen, aber es ist zu fiddly - wenn ich mit der Maus über einen untergeordneten Knoten innerhalb der InfoBox fahre, zählt das als Mouseout auf dem übergeordneten Knoten und löst das Ereignis aus.
Hängt das irgendwie mit der Ausbreitung zusammen? Ich weiß, dass die InfoBox eine enableEventPropagation wenn Sie eine neue InfoBox erstellen, aber ich bin mir nicht ganz sicher, wie und warum sie verwendet werden sollte.
Ziel des Experiments ist es, ein Info-Fenster mit entsprechenden Links zu erstellen, das erscheint, wenn man mit der Maus über die Markierung fährt. Man kann dann die Maus innerhalb des Infofensters bewegen und interagieren, und wenn man die Maus herauszieht, wird das Infofenster geschlossen. Ich habe eine andere Methode ausprobiert, bei der der Mauszeiger auf der Markierung eine externe Funktion auslöst, die ein externes Infofenster-Element erstellt, das positioniert ist und seine eigene Ereignisbehandlung hat. Das funktioniert gut, aber die Überlagerung des benutzerdefinierten Info-Fensters über der Karte bedeutet, dass, wenn Sie mit der Maus über eine andere Markierung in unmittelbarer Nähe (unter dem benutzerdefinierten Info-Fenster) kann es nicht registrieren, die Maus über für die Markierung.
Dies war mein Versuch mit der InfoBox-Methode:
<!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>Wenn also jemand weiß, wie das funktioniert und wie man richtig reagiert (oder entsprechende Tipps/Tricks liefert), dann wäre das großartig!
