Я возился с v3 API Карт Google и использую плагин InfoBox (часть пакета http://google -maps-utility-library-v3.googlecode.com / ) вместечтобы создать несколько красиво оформленных информационных окон, которые реагируют на взаимодействия маркеров.
В этом конкретном эксперименте я попытался открыть всплывающее окно InfoBox, когда маркер перемещался снова и снова, однако яизо всех сил пытался решить проблему с системой событий, касающейся наведения мыши / отключения мыши в окне InfoBox.Что происходит, так это то, что я могу найти DIV и использовать google.maps.event.addDomListener для присоединения события наведения и наведения мыши к InfoBox, за исключением того, что это слишком неудобно - когда я нахожу курсор мыши на дочернем узле в InfoBox, он считается мышью на родительскомузел и запускает событие.
Это как-то связано с распространением?Я знаю, что у 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 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>
Так что я думаю, если кто-нибудь знает, как заставить это работать и правильно реагировать (или предоставлять соответствующие советы / рекомендации), тогда это было бы здорово!