के साथ मैं Google मानचित्र एपीआई के v3 के साथ मिल रहा हूं और इन्फोबॉक्स प्लगइन (http://google-maps-utility-library-v3.googlecode.com/ सूट का हिस्सा) का उपयोग करके कुछ अच्छी तरह से स्टाइल की गई जानकारी विंडो बनाने के लिए जो मार्कर इंटरैक्शन पर प्रतिक्रिया करता है ।Google मानचित्र एपीआई v3 इवेंट माउसओवर इन्फोबॉक्स प्लगइन
इस विशेष प्रयोग के लिए, जब मार्कर को ऊपर और बाहर रखा गया है, तो मैंने इन्फोबॉक्स विंडो पॉप-अप प्राप्त करने का प्रयास किया है, हालांकि मैंने माउसओवर/माउसआउट के बारे में ईवेंट सिस्टम के साथ इस मुद्दे को हल करने के लिए संघर्ष किया है इन्फोबॉक्स विंडो। क्या होता है कि मैं डीआईवी का पता लगा सकता हूं और एक माउसओवर और माउसआउट इवेंट को इन्फोबॉक्स में संलग्न करने के लिए google.maps.event.addDomListener का उपयोग कर सकता हूं, सिवाय इसके कि यह बहुत ही स्पष्ट है - जब मैं इन्फोबॉक्स में एक बच्चे नोड को माउसवर करता हूं, तो यह पैरेंट नोड पर माउसआउट के रूप में गिना जाता है और घटना को आग लगती है।
क्या यह किसी भी तरह से प्रचार से संबंधित है? मुझे पता है कि जब आप एक नया इन्फोबॉक्स बनाते हैं तो इन्फोबॉक्स में enableEventPropagation स्विच होता है, लेकिन मुझे पूरा यकीन नहीं है कि इसका उपयोग कैसे किया जाए और इसका उपयोग क्यों किया जाए।
प्रयोग का उद्देश्य मार्कर के माउसओवर पर दिखाई देने वाले संबंधित लिंक के साथ एक जानकारी विंडो बनाना है। फिर आप माउस को जानकारी विंडो के अंदर ले जा सकते हैं और बातचीत कर सकते हैं और जब आप माउस आउट करते हैं तो यह जानकारी विंडो बंद कर देगा। मैंने एक और विधि की कोशिश की है जहां मार्कर पर माउसओवर एक बाहरी फ़ंक्शन को ट्रिगर करता है जो एक बाहरी जानकारी विंडो तत्व बनाता है जो कि स्थित है और इसका अपना ईवेंट हैंडलिंग है। यह ठीक काम करता है, लेकिन मानचित्र के शीर्ष पर कस्टम जानकारी विंडो की लेयरिंग का मतलब है कि जब आप निकट निकटता (कस्टम जानकारी विंडो के नीचे) में किसी अन्य मार्कर पर माउस करते हैं तो यह मार्कर के लिए माउसओवर पंजीकृत नहीं कर सकता है। किसी को भी जानता है कि अगर यह काम करने के लिए कैसे करने के लिए और ठीक से प्रतिक्रिया (या प्रासंगिक युक्तियां/चाल प्रदान)
<!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>
तो मुझे लगता है कि इसके बाद उस बहुत अच्छा होगा:
यह infobox विधि पर मेरे प्रयास किया गया था! जब मैं अंदर एक बच्चा नोड अपना माउस ले -
क्या आपको कभी इसके लिए अच्छा समाधान मिला? नीचे दिया गया jQuery उदाहरण ऐसा लगता है कि यह पॉपअप को लक्षित करता है, न कि मार्कर।मुझे यह देखने में परेशानी हो रही है कि इन्फोबॉक्स का उपयोग करके इसे कैसे कार्यान्वित किया जाए। इन्फोबॉक्स के नवीनतम देव संस्करण में अपग्रेड करके और ईवेंट प्रचार को चालू करके, मैं पॉपअप को पॉपअप के नीचे किसी भी अंतर्निहित मार्कर पर कूदने में सक्षम नहीं था। –