Google Haritalar API'sının v3'üyle ve InfoBox eklentisini (http://google-maps-utility-library-v3.googlecode.com/ paketinin bir parçası) kullanarak, etiket etkileşimlerine tepki veren güzel bir şekilde tasarlanmış bazı bilgi pencereleri oluşturmak için kullanıyorum .Google Maps API v3 InfoBox eklentisi ile olay mizanpajı
Bu özel deneme için, belirteç açılıp kapandığında InfoBox penceresini açmaya çalıştım, ancak konuyla ilgili mouseover/mouseout ile ilgili sorunu çözmek için uğraştım. InfoBox penceresi. Ne olursa DIV'yi bulabilir ve InfoBox'a bir mouseover ve mouseout olayı eklemek için bir google.maps.event.addDomListener kullanabilirim. Bu çok bilgi dışında, InfoBox'un içinde bir çocuk düğümünü taklit ettiğimde, ana düğümde mouseout olarak sayılır. olayı tetikler.
Bu bir şekilde yayılma ile bağlantılı mıdır? Yeni bir Bilgi Kutusu oluştururken InfoBox'un enableEventPropagation anahtarına sahip olduğunu biliyorum, ancak nasıl ve neden kullanılacağını tam olarak bilmiyorum.
Deneyin amacı, işaretleyicinin fareyle üzerine gelindiğinde içindeki ilgili bağlantılar içeren bir bilgi penceresi oluşturmaktır. Daha sonra, fareyi bilgi penceresinin içinde hareket ettirebilir ve etkileşime girebilir ve dışarı çıktığınızda bilgi penceresini kapatabilirsiniz. İşaretleyicideki fare perdelemesinin, konumlandırılan ve kendi olay işleme özelliğine sahip bir dış bilgi penceresi öğesi oluşturan bir dış işlevi tetiklediği başka bir yöntem denedim. Bu iyi çalışıyor, ancak özel bilgi penceresinin haritanın üst kısmındaki katmanlanması, yakın bir yerde (özel bilgi penceresinin altında) başka bir işaretçiyi farenizin üzerine getirdiğinizde, işaretleyicinin fare kapağını kaydedemeyeceği anlamına gelir. Herkes bu işi yapmak ve doğru tepki (veya ilgili ipuçları/hileler sağlamak) bilen varsa
<!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>
Yani sanırım o zaman bu harika olurdu:
Bu bilgi kutusu yöntemiyle benim girişimi oldu! Ben içinde bir alt düğüm mouseover zaman -
Bunun için iyi bir çözüm buldunuz mu? Aşağıdaki jQuery örneği, işaretçiyi değil, açılır pencerenin kendisini hedefliyor gibi görünüyor.InfoBox kullanarak bu şekilde nasıl uygulanacağını görmekte sorun yaşıyorum. En son InfoBox sürümüne yükseltme yaparak ve olay yayılımını açarak, pop-up'ı açılır pencerenin altındaki herhangi bir temel işaretçiye atlamamıştım. –