मुझे Google मानचित्र मार्कर के माउस होवर पर छवि और टेक्स्ट के साथ कुछ अच्छा टूलटिप दिखाने की ज़रूरत है।
marker.setTitle - केवल पाठ के साथ काम करता है लेकिन एचटीएमएल
के साथ नहीं क्या Google मानचित्र एपीआई मानक समाधान है?
क्या आप टूलटिप्स बनाने और उन्हें अच्छा दिखने के लिए lib का सुझाव दे सकते हैं?Google मानचित्र मार्कर के लिए कस्टम टूलटिप कैसे जोड़ें?
उत्तर
आप मार्कर पर mouseover
ईवेंट सुन सकते हैं, और उस घटना के साथ प्रदर्शित होने के लिए infoWindow
को ट्रिगर कर सकते हैं।
एक बार जब आपके पास इन्फॉविंडो हो, तो आप इसमें चित्र और टेक्स्ट डाल सकते हैं जिस तरह से एपीआई द्वारा समर्थित है।
यदि आप एक DIY समाधान चाहते हैं तो मैंने एक परियोजना पर क्या किया है।
- सीएसएस स्थिति सेट के साथ अपने पृष्ठ पर एक छिपा div बनाएँ। सुनिश्चित करें कि आपका डीआईवी आपके मानचित्र कंटेनर (जेड-इंडेक्स) के शीर्ष पर दिखाई देता है।
- एक शोडिव/hideDiv फ़ंक्शन ट्रिगर करने के लिए अपने मार्करों को बाएं माउसओवर और माउसआउट ईवेंट बाध्य करें।
- जब माउस मार्कर को घुमाता है, तो माउस एक्स, वाई स्थिति प्राप्त करें, डीआईवी टॉप सेट करें और तदनुसार सीएसएस मूल्यों को सेट करें और इसके सीएसएस को प्रदर्शित करने के लिए सेट करें: ब्लॉक;
- जब माउस बाहर हो जाता है, तो फिर डीआईवी को छुपाएं।
इस तरह आप वास्तव में नियंत्रित कर सकते हैं कि आपका "infowindow" कैसे दिखाई देता है और इसमें क्या होगा। सौभाग्य।
यदि आप google.maps.event.addListener का उपयोग करके मार्कर के माउसओवर ईवेंट को संभालते हैं, तो सभी ईवेंट ऑब्जेक्ट में लेट और लम्बाई होती है, इसलिए आपको माउस की एक्स, वाई स्थिति नहीं मिलती है। यह इस दृष्टिकोण को लागू करने के लिए असंभव प्रस्तुत करता है। – Justin
मैंने यह नहीं कहा कि आपको मार्कर श्रोता से माउस की स्थिति मिलती है। इसे डीओएम से प्राप्त करें जैसा कि आप किसी अन्य स्क्रिप्ट में करेंगे। – MrUpsidown
ओलेग, आप Google नक्शे एपीआई के लिए क्यों बाध्य हैं। आप डीओएम में कस्टम टूलटिप इंजेक्ट कर सकते हैं।
मानचित्र पर माउसओवर, मूसमोव और माउसआउट श्रोताओं के लिए ईवेंट श्रोताओं को संलग्न करें (या मानचित्र के विशिष्ट हिस्सों)। उनमें से प्रत्येक श्रोताओं ने आपको माउस निर्देशांक देने का तर्क भी दिया है।
mouseout पर स्थिति अद्यतन (बाएं और ऊपर) यह
स्थिति माउसओवर पर के लिए टूलटिप के सीएसएस पर एक निश्चित/पूर्ण शैली का प्रयोग करें, MouseMove पर डोम में कर्सर स्थिति पर टूलटिप इंजेक्षन,, डॉम से टूलटिप हटा दें।
मैंने हाल ही में इसे Google मानचित्र बहुभुज के लिए बनाया है। आप अपने मानचित्र के किसी अन्य भाग के लिए अपना दृष्टिकोण दोबारा कर सकते हैं क्योंकि Google मानचित्र पर लगभग हर सुविधा घटनाओं का समर्थन करती है।
लिंक: https://medium.com/@asimmittal/custom-tooltips-for-google-maps-in-pure-javascript-a8004b8e9458
- 1. Google मानचित्र v3 मार्कर माउसओवर टूलटिप
- 2. Google मानचित्र: कस्टम मार्कर में छाया कैसे जोड़ें?
- 3. Google मानचित्र मार्कर
- 4. Google मानचित्र v3 पॉलीलाइन टूलटिप
- 5. Google मानचित्र कस्टम मार्कर रेटिना रिज़ॉल्यूशन
- 6. Google मानचित्र मार्कर समूह
- 7. Google मानचित्र मार्कर बदलें
- 8. Google मानचित्र एपीआई: मार्कर और भाषण बबल कैसे जोड़ें?
- 9. Google मानचित्र V3 मार्कर
- 10. Google मानचित्र मार्कर इवेंट
- 11. Google मानचित्र मार्कर क्लस्टरर
- 12. Google मानचित्र v3 कस्टम मार्कर आइकन इसे मानचित्र पर
- 13. Google मानचित्र में मार्कर दृश्यता
- 14. Google मानचित्र पर एकाधिक मार्कर
- 15. Google मानचित्र मार्कर प्रबंधक V3
- 16. Google मानचित्र जानकारीविंडो केवल मार्कर
- 17. Google मानचित्र एक मानचित्र पर दो मार्कर
- 18. Google मानचित्र: मार्कर पर ऑटो सेंटर मानचित्र
- 19. Google मानचित्र मार्कर एपीआई v3
- 20. आप Google मानचित्र API v3 के लिए कस्टम आइकन के साथ मार्कर कैसे बनाते हैं?
- 21. Google मानचित्र
- 22. Google मार्कर
- 23. Google मानचित्र में Google "My Maps" Layer जोड़ें जावास्क्रिप्ट API
- 24. कस्टम Google मानचित्र ओवरले?
- 25. Google मैप्स एपीआई v3: कस्टम मार्कर
- 26. Google मानचित्र मार्कर स्प्राइट छवि स्थिति
- 27. Google मानचित्र में मार्कर ड्रॉप इवेंट?
- 28. Google मानचित्र मार्कर हटाने के लिए रिवर्स एनीमेशन?
- 29. Google एंड्रॉइड मानचित्र पर विभिन्न नामांकित मार्कर
- 30. Google मानचित्र V3 सेट सेंटर विशिष्ट मार्कर
हाँ, लेकिन infoWindow अनुकूलित करने के लिए कठिन है। यह पूर्वनिर्धारित डिजाइन है। इन्फोबॉक्स मेरे लिए मुनाफा है। –