🚭 🧑🏿 🛀🏻 Google मैप्स जावास्क्रिप्ट एपीआई के लिए सबसे पहले परिचय 😣 🌿 👩🏿‍🎓

इस पोस्ट में मैं Google मैप्स जेएस एपीआई का उपयोग करके अपने अनुभव और साइट के मोबाइल संस्करण में इसके कार्यान्वयन के बारे में बात करूंगा।

हाल ही में, काम पर, मुझे आगंतुक के वर्तमान निर्देशांक के भीतर साइट के उपयोगकर्ताओं की खोज के लिए डिज़ाइन किए गए मॉड्यूल के कार्यान्वयन से निपटना पड़ा (साइट का विषय डेटिंग है, और मैं रहस्य प्रकट करने और विज्ञापन नहीं करने के लिए लिंक और नाम प्रदान नहीं करूंगा)। प्रारंभ में, मैं एक मौजूदा मॉड्यूल कार्यान्वयन में आया था। यह संस्करण एक या दो साल पहले लिखा गया था और एपीआई के एक पुराने संस्करण का उपयोग किया गया था, इसलिए जब मैं प्रलेखन में आया और इस मॉड्यूल में कुछ जोड़ने की कोशिश की, तो मुझे स्वाभाविक रूप से त्रुटियां मिलीं।
निशुल्क एपीआई कुंजी पंजीकृत करने के बाद, मैंने उपयोग की गई लाइब्रेरी को अपडेट किया और मदद का अध्ययन करना शुरू कर दिया।
मुझे अपने स्वयं के मानचित्र तत्व (ओवरले) बनाने के अवसर से बहुत खुशी हुई, जो वास्तव में, मुझे करना था। मैं इस सुविधा का उपयोग करने का एक उदाहरण दूंगा:

function TestOverlay(bounds) { this._bounds = bounds; } TestOverlay.prototype = new GOverlay(); TestOverlay.prototype.initialize = function(map) { var div = document.createElement("div"); div.style.border = "2px solid #888888"; div.style.position = "absolute"; map.getPane(G_MAP_MAP_PANE).appendChild(div); this._map = map; this._div = div; } TestOverlay.prototype.remove = function() { this._div.parentNode.removeChild(this._div); } TestOverlay.prototype.copy = function() { return new Rectangle(this._bounds); } TestOverlay.prototype.redraw = function(force) { if (!force) return; var c1 = this._map.fromLatLngToDivPixel(this._bounds.getSouthWest()); var c2 = this._map.fromLatLngToDivPixel(this._bounds.getNorthEast()); this._div.style.width = Math.abs(c2.x - c1.x) + "px"; this._div.style.height = Math.abs(c2.y - c1.y) + "px"; this._div.style.left = (Math.min(c2.x, c1.x) - 2) + "px"; this._div.style.top = (Math.min(c2.y, c1.y) - 2) + "px"; } function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); map.addControl(new GSmallMapControl()); var bounds = map.getBounds(); var southWest = bounds.getSouthWest(); var northEast = bounds.getNorthEast(); var lngDelta = (northEast.lng() - southWest.lng()) / 3; var latDelta = (northEast.lat() - southWest.lat()) / 4; var rectBounds = new GLatLngBounds( new GLatLng(southWest.lat() + latDelta, southWest.lng() + lngDelta), new GLatLng(northEast.lat() - latDelta, northEast.lng() - lngDelta)); map.addOverlay(new TestOverlay(rectBounds)); } }

जैसा कि आप इस उदाहरण से देख सकते हैं, आपके अपने मानचित्र तत्व गोवर्ले इंटरफ़ेस को लागू करके बनाए गए हैं। इस इंटरफ़ेस को लागू करने के लिए, इसके 4 तरीकों को लागू करना आवश्यक है - प्रारंभिक, निकालें, प्रतिलिपि और रीड्रा।
इसके अलावा, बहुत सुविधाजनक और सहज ज्ञान युक्त कक्षाएं जैसे कि GPoint, GSize, GIcon का उपयोग मानक मानचित्र तत्वों के साथ काम करने के लिए किया जाता है। उत्तरार्द्ध, उदाहरण के लिए, आप आइकन का आकार सेट करने की अनुमति देते हैं, आइकन पर एक छाया जोड़ सकते हैं, और नक्शे के साथ आइकन का संपर्क बिंदु भी सेट कर सकते हैं। यह सब बहुत सरल इंटरफ़ेस के लिए संभव है:

  var baseIcon = new GIcon(G_DEFAULT_ICON); baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png"; baseIcon.iconSize = new GSize(20, 34); baseIcon.shadowSize = new GSize(37, 34); baseIcon.iconAnchor = new GPoint(9, 34);

अपडेट से उत्पन्न मॉड्यूल Google मैप्स एपीआई की अधिक हालिया सुविधाओं के उपयोग के कारण बहुत अधिक सुविधाजनक और दिलचस्प हो गया है।

Google मैप्स जावास्क्रिप्ट एपीआई के लिए सबसे पहले परिचय

More articles: