🔡 🍇 🎷 कस्टम Google मानचित्र स्विच करता है 🕵🏿 🐬 ☁️

मुझे वेब पर Google मानचित्र नियंत्रणों की स्टाइलिंग का स्पष्ट विवरण नहीं मिला। गूगल मैप्स एपीआई वी 3 पर आधारित नक्शों वाली साइटों के एक सरसरी अध्ययन ने यह धारणा बनाई कि डेवलपर्स डिफ़ॉल्ट नियंत्रणों को अनुकूलित करने से बचते हैं। जैसा कि यह निकला, अनुकूलन एक बहुत ही सरल प्रक्रिया है। बिल्ली के नीचे, मेरा jquery कार्यान्वयन।

उदाहरण में, मैं jquery के नक्शे ui का उपयोग कर रहा हूं। वैसे, Jquery UI से आपको केवल 3Kb विजेट मॉड्यूल की आवश्यकता होती है।

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&language=ru"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> <script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/tags/3.0-alpha/ui/jquery.ui.map.js"></script>

एक क्लासिक उदाहरण शीर्ष इंडेंटेशन है।

हम केवल आवश्यक विशेषताओं के साथ तत्वों को ढूंढते हैं और उन्हें सीएसएस असाइन करते हैं।

 $(function () { //    #map_canvas $('#map_canvas').gmap({panControl: false}); //      controlwidth=32 $('div.gmnoprint[controlwidth=32]').css({'margin-top': '20px'}); //        font-weight $('div[style*="font-weight"]').css({'margin-top': '20px'}); });

लेकिन ऐसा नहीं है, बल्कि नक्शा पूरी तरह से लोड होने के बाद ही।

 $(function () { $('#map_canvas').gmap({panControl: false}); var map = $('#map_canvas').gmap('get', 'map'); google.maps.event.addDomListener(map, 'tilesloaded', function(){ $('div.gmnoprint[controlwidth=32]').css({'margin-top': '20px'}); $('div[style*="font-weight"]').css({'margin-top': '20px'}); }); });

लेकिन यह सब नहीं है, यह सुनिश्चित करना आवश्यक है कि हम मूल तत्व को स्थानांतरित करते हैं, अन्यथा इसे गलत तरीके से प्रदर्शित किया जाएगा।

 $('div[style*="font-weight"]').parent().parent().css({'margin-top': '20px'});

एक अधिक जटिल उदाहरण इसका ज़ूम और मैप प्रकार स्विच है। सबसे पहले, सभी नियंत्रणों को छिपाएं।

 $(function () { $('#map_canvas').gmap({disableDefaultUI: true}); });

ज़ूम और मैप बटन जोड़ें

 <img id=zoomOut src=images/out.png /><img id=zoomIn src=images/in.png /><img id=map src=map.png /><img id=sat src=sat.png />

दोहरे वृद्धि को प्राप्त करने पर "अगला" बटन को बंद करना अच्छा होगा: एक न्यूनतम वृद्धि के साथ बार-बार गुणा महाद्वीपों - एक भद्दा दृष्टि।

 $(function () { $('#map_canvas').gmap({disableDefaultUI: true}); var map = $('#map_canvas').gmap('get', 'map'); $('#zoomIn').click(function() { map.setZoom(map.getZoom()+1); if(map.getZoom()==3) $('#zoomOut').show(); }); $('#zoomOut').click(function() { map.setZoom(map.getZoom()-1); if(map.getZoom()==2) $(this).hide(); }); $('#sat').click(function() { map.setMapTypeId(google.maps.MapTypeId.SATELLITE) }); $('#map').click(function() { map.setMapTypeId(google.maps.MapTypeId.ROADMAP) }); });

जैसा कि आप देख सकते हैं, यह बहुत अच्छी तरह से काम किया।

सूत्रों को यैंडेक्स डिस्क से डाउनलोड किया जा सकता है।

वह सब है। यदि सामग्री दिलचस्प लगती है - मैं नक्शे के साथ काम करने के बारे में प्रकाशित करना जारी रखूंगा।

टिप्पणी के लिए पुनश्च धन्यवाद, स्वरूपण तय

कस्टम Google मानचित्र स्विच करता है

More articles: