2012-03-06 12 views
11

मुझे Google मानचित्र मार्कर के माउस होवर पर छवि और टेक्स्ट के साथ कुछ अच्छा टूलटिप दिखाने की ज़रूरत है।
marker.setTitle - केवल पाठ के साथ काम करता है लेकिन एचटीएमएल
के साथ नहीं क्या Google मानचित्र एपीआई मानक समाधान है?
क्या आप टूलटिप्स बनाने और उन्हें अच्छा दिखने के लिए lib का सुझाव दे सकते हैं?Google मानचित्र मार्कर के लिए कस्टम टूलटिप कैसे जोड़ें?

उत्तर

3

आप मार्कर पर mouseover ईवेंट सुन सकते हैं, और उस घटना के साथ प्रदर्शित होने के लिए infoWindow को ट्रिगर कर सकते हैं।

एक बार जब आपके पास इन्फॉविंडो हो, तो आप इसमें चित्र और टेक्स्ट डाल सकते हैं जिस तरह से एपीआई द्वारा समर्थित है।

+0

हाँ, लेकिन infoWindow अनुकूलित करने के लिए कठिन है। यह पूर्वनिर्धारित डिजाइन है। इन्फोबॉक्स मेरे लिए मुनाफा है। –

4

यदि आप एक DIY समाधान चाहते हैं तो मैंने एक परियोजना पर क्या किया है।

  1. सीएसएस स्थिति सेट के साथ अपने पृष्ठ पर एक छिपा div बनाएँ। सुनिश्चित करें कि आपका डीआईवी आपके मानचित्र कंटेनर (जेड-इंडेक्स) के शीर्ष पर दिखाई देता है।
  2. एक शोडिव/hideDiv फ़ंक्शन ट्रिगर करने के लिए अपने मार्करों को बाएं माउसओवर और माउसआउट ईवेंट बाध्य करें।
  3. जब माउस मार्कर को घुमाता है, तो माउस एक्स, वाई स्थिति प्राप्त करें, डीआईवी टॉप सेट करें और तदनुसार सीएसएस मूल्यों को सेट करें और इसके सीएसएस को प्रदर्शित करने के लिए सेट करें: ब्लॉक;
  4. जब माउस बाहर हो जाता है, तो फिर डीआईवी को छुपाएं।

इस तरह आप वास्तव में नियंत्रित कर सकते हैं कि आपका "infowindow" कैसे दिखाई देता है और इसमें क्या होगा। सौभाग्य।

+0

यदि आप google.maps.event.addListener का उपयोग करके मार्कर के माउसओवर ईवेंट को संभालते हैं, तो सभी ईवेंट ऑब्जेक्ट में लेट और लम्बाई होती है, इसलिए आपको माउस की एक्स, वाई स्थिति नहीं मिलती है। यह इस दृष्टिकोण को लागू करने के लिए असंभव प्रस्तुत करता है। – Justin

+0

मैंने यह नहीं कहा कि आपको मार्कर श्रोता से माउस की स्थिति मिलती है। इसे डीओएम से प्राप्त करें जैसा कि आप किसी अन्य स्क्रिप्ट में करेंगे। – MrUpsidown

0

ओलेग, आप Google नक्शे एपीआई के लिए क्यों बाध्य हैं। आप डीओएम में कस्टम टूलटिप इंजेक्ट कर सकते हैं।

मानचित्र पर माउसओवर, मूसमोव और माउसआउट श्रोताओं के लिए ईवेंट श्रोताओं को संलग्न करें (या मानचित्र के विशिष्ट हिस्सों)। उनमें से प्रत्येक श्रोताओं ने आपको माउस निर्देशांक देने का तर्क भी दिया है।

mouseout पर स्थिति अद्यतन (बाएं और ऊपर) यह

स्थिति माउसओवर पर के लिए टूलटिप के सीएसएस पर एक निश्चित/पूर्ण शैली का प्रयोग करें, MouseMove पर डोम में कर्सर स्थिति पर टूलटिप इंजेक्षन,, डॉम से टूलटिप हटा दें।

मैंने हाल ही में इसे Google मानचित्र बहुभुज के लिए बनाया है। आप अपने मानचित्र के किसी अन्य भाग के लिए अपना दृष्टिकोण दोबारा कर सकते हैं क्योंकि Google मानचित्र पर लगभग हर सुविधा घटनाओं का समर्थन करती है।

लिंक: https://medium.com/@asimmittal/custom-tooltips-for-google-maps-in-pure-javascript-a8004b8e9458

संबंधित मुद्दे