इस दस्तावेज़ में उन नक्शे के बारे में चर्चा की गई है जिन्हें आप
Maps JavaScript एपीआई. यह एपीआई, MapType
का इस्तेमाल करता है
को इन मैप के बारे में जानकारी होल्ड करने की ज़रूरत नहीं पड़ेगी. MapType
एक ऐसा इंटरफ़ेस है जो मैप टाइल के डिसप्ले और इस्तेमाल को परिभाषित करता है और
स्क्रीन कोऑर्डिनेट से दुनिया में निर्देशांक सिस्टम का अनुवाद
निर्देशांक (मैप पर). हर MapType
में
टाइल, और प्रॉपर्टी को वापस पाने और रिलीज़ करने की प्रोसेस को मैनेज करने के कुछ तरीके बताए गए हैं
जो इसके विज़ुअल व्यवहार को तय करते हैं.
Maps JavaScript API में अलग-अलग तरह के मैप का अंदरूनी काम काफ़ी ऐडवांस लेवल का विषय है. ज़्यादातर डेवलपर बुनियादी मैप के टाइप जो नीचे बताए गए हैं. हालांकि, आप इसका प्रज़ेंटेशन भी संशोधित कर सकते हैं स्टाइल किए गए मैप का इस्तेमाल करने वाले मौजूदा मैप या कस्टम मैप टाइप का इस्तेमाल करके, खुद की मैप टाइल तय करें. पसंद के मुताबिक बनाए गए मैप टाइप उपलब्ध कराते समय, आपको यह समझना होगा कि मैप में किस तरह बदलाव करना है मैप टाइप रजिस्ट्री.
मूल मैप प्रकार
Maps JavaScript API में चार तरह के मैप उपलब्ध होते हैं. जाने-पहचाने "पेंट किए गए" के अलावा रोड मैप टाइल, Maps JavaScript API, अन्य तरह के मैप के साथ भी काम करता है.
Maps JavaScript API में इस तरह के मैप उपलब्ध हैं:
roadmap
, डिफ़ॉल्ट रोड मैप व्यू दिखाता है. यह डिफ़ॉल्ट मैप टाइप है.satellite
, Google Earth सैटलाइट को दिखाता है इमेज.hybrid
सामान्य और उपग्रह का मिश्रण दिखाता है देखे जाने की संख्या.terrain
इलाके के हिसाब से भौतिक मैप दिखाता है जानकारी.
Map
के ज़रिए इस्तेमाल किए जा रहे मैप टाइप में बदलाव करने के लिए,
सेटिंग के ज़रिए, कंस्ट्रक्टर के अंदर mapTypeId
की प्रॉपर्टी
यह Map options
ऑब्जेक्ट है या मैप के
setMapTypeId()
तरीका. mapTypeID
प्रॉपर्टी
डिफ़ॉल्ट रूप से roadmap
होता है.
कंस्ट्रक्शन होने पर, mapTypeId
सेट करने का तरीका:
var myLatlng = new google.maps.LatLng(-34.397, 150.644); var mapOptions = { zoom: 8, center: myLatlng, mapTypeId: 'satellite' }; var map = new google.maps.Map(document.getElementById('map'), mapOptions);
mapTypeId
में डाइनैमिक तरीके से बदलाव करना:
map.setMapTypeId('terrain');
ध्यान दें कि असल में आप मैप का मैप टाइप सीधे सेट नहीं करते,
बल्कि इसके बजाय इसके mapTypeId
को
आइडेंटिफ़ायर का इस्तेमाल करके MapType
.
Maps JavaScript API, मैप टाइप रजिस्ट्री का इस्तेमाल करता है,
इन रेफ़रंस को मैनेज करने के बारे में नीचे बताया गया है.
45° तस्वीरें
Maps JavaScript API इनके लिए विशेष 45° इमेजरी का समर्थन करता है कुछ खास जगहों पर. यह हाई-रिज़ॉल्यूशन तस्वीरों का संग्रह आपको हर दिशा के लिए काल्पनिक दृश्य (उत्तर, दक्षिण, पूर्व, पश्चिम). ये चित्र ऊपर उपलब्ध हैं इस्तेमाल किए जा सकने वाले मैप टाइप के लिए, ज़ूम लेवल.
नीचे दी गई इमेज में न्यूयॉर्क का 45° व्यू दिखाया गया है:
satellite
और hybrid
तरह के मैप, 45° फ़ॉर्मैट में काम करते हैं
(12 या उससे ज़्यादा) जहां उपलब्ध हो. अगर उपयोगकर्ता
किसी ऐसी जगह पर ज़ूम करता है जहां ऐसी तस्वीरें मौजूद हैं, तो ये मैप टाइप
उनके व्यू अपने-आप बदल दिए जाएंगे. इससे ये बदलाव किए जा सकेंगे:
- सैटलाइट या हाइब्रिड तस्वीरों को 45° दिखाने वाली इमेज से बदल दिया जाता है
अपने सामने लाएं. डिफ़ॉल्ट रूप से, ऐसे व्यू
उत्तर दिशा की ओर है. अगर उपयोगकर्ता ज़ूम आउट करता है, तो डिफ़ॉल्ट सैटलाइट या
हाइब्रिड इमेजरी फिर से दिखाई देने लगती है. ज़ूम लेवल के आधार पर, व्यवहार अलग-अलग होता है
और
tilt
की वैल्यू: - ज़ूम लेवल 12 और 18 के बीच, टॉप-डाउन बेसमैप (0°), इसके हिसाब से दिखेगा
अगर
tilt
को 45 पर सेट नहीं किया जाता, तो डिफ़ॉल्ट तौर पर ऐसा होता है. - 18 या उससे ज़्यादा ज़ूम लेवल पर, 45° बुनियादी मैप तब तक दिखता है, जब तक
tilt
को 0 पर सेट किया गया है. - घुमाने वाला कंट्रोल दिखने लगता है. घुमाने के कंट्रोल से आपको कई विकल्प मिलते हैं
इसकी मदद से उपयोगकर्ता, झुका हुआ टॉगल कर सकता है और व्यू को 90° में घुमा सकता है
बढ़ोतरी देखी जा सकती है. घुमाने के कंट्रोल को छिपाने के लिए,
false
के लिएrotateControl
.
45° की तस्वीरें दिखाने वाले मैप टाइप से ज़ूम आउट करना इनमें से हर बदलाव के बाद, मूल मैप के टाइप को फिर से पहले जैसा किया जा रहा है.
45° तस्वीरों का संग्रह चालू और बंद करना
आप इस पर setTilt(0)
को कॉल करके 45° इमेजरी को अक्षम कर सकते हैं:
Map
ऑब्जेक्ट. काम करने वाले मैप टाइप के लिए 45° तस्वीरें चालू करने के लिए,
setTilt(45)
को कॉल करें. Map
का getTilt()
तरीका, हमेशा मौजूदा tilt
को दिखाएगा
मैप; अगर आप मैप पर tilt
सेट करते हैं और बाद में उसे हटा देते हैं
tilt
(उदाहरण के लिए, मैप को ज़ूम आउट करके), मैप के
getTilt()
तरीका चुनने पर, 0
दिखेगा.
अहम जानकारी: 45° वाली तस्वीरें सिर्फ़ इन पर काम करती हैं रास्टर मैप; इस इमेजरी का उपयोग वेक्टर मैप के साथ नहीं किया जा सकता.
इस उदाहरण में, न्यूयॉर्क शहर का 45° व्यू दिखाया गया है:
TypeScript
function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { center: { lat: 40.76, lng: -73.983 }, zoom: 15, mapTypeId: "satellite", } ); map.setTilt(45); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
JavaScript
function initMap() { const map = new google.maps.Map(document.getElementById("map"), { center: { lat: 40.76, lng: -73.983 }, zoom: 15, mapTypeId: "satellite", }); map.setTilt(45); } window.initMap = initMap;अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
सैंपल आज़माएं
45° तक घुमाई जा रही तस्वीरें
45° वाली तस्वीरों में असल में इमेज का संग्रह होता है
हर एक कार्डिनल दिशा के लिए (उत्तर, दक्षिण, पूर्व, पश्चिम). मैप पर एक बार
45° वाली तस्वीरें दिखा रहा है, तो आप
को कॉल करके इसके प्रमुख दिशा-निर्देशों में से एक की ओर
Map
ऑब्जेक्ट पर setHeading()
, पास हो रहा है
एक संख्या मान, जिसे उत्तर से डिग्री के रूप में दिखाया जाता है.
नीचे दिए गए उदाहरण में, एरियल मैप दिखाया गया है और वह अपने-आप घूमता है बटन पर क्लिक होने पर हर 3 सेकंड में मैप:
TypeScript
let map: google.maps.Map; function initMap(): void { map = new google.maps.Map(document.getElementById("map") as HTMLElement, { center: { lat: 40.76, lng: -73.983 }, zoom: 15, mapTypeId: "satellite", heading: 90, tilt: 45, }); // add listener to button document.getElementById("rotate")!.addEventListener("click", autoRotate); } function rotate90(): void { const heading = map.getHeading() || 0; map.setHeading(heading + 90); } function autoRotate(): void { // Determine if we're showing aerial imagery. if (map.getTilt() !== 0) { window.setInterval(rotate90, 3000); } } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
JavaScript
let map; function initMap() { map = new google.maps.Map(document.getElementById("map"), { center: { lat: 40.76, lng: -73.983 }, zoom: 15, mapTypeId: "satellite", heading: 90, tilt: 45, }); // add listener to button document.getElementById("rotate").addEventListener("click", autoRotate); } function rotate90() { const heading = map.getHeading() || 0; map.setHeading(heading + 90); } function autoRotate() { // Determine if we're showing aerial imagery. if (map.getTilt() !== 0) { window.setInterval(rotate90, 3000); } } window.initMap = initMap;अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
सैंपल आज़माएं
मैप टाइप रजिस्ट्री में बदलाव करना
मैप का mapTypeId
, स्ट्रिंग आइडेंटिफ़ायर है
जिसका इस्तेमाल MapType
को
यूनीक वैल्यू का इस्तेमाल किया जाता है. हर Map
ऑब्जेक्ट में
MapTypeRegistry
जिसमें यह
उस मैप के लिए उपलब्ध MapType
s. यह रजिस्ट्री
का इस्तेमाल उन मैप को चुनने के लिए किया जाता है जो
उदाहरण के लिए, Map का MapType कंट्रोल.
आप सीधे मैप टाइप रजिस्ट्री से नहीं पढ़ते. इसके बजाय,
कस्टम मैप टाइप जोड़कर और असोसिएट करके, रजिस्ट्री में बदलाव किया जा सकता है
उन्हें आपकी पसंद के स्ट्रिंग आइडेंटिफ़ायर के साथ सबमिट करें. इसमें बदलाव नहीं किया जा सकता
या मूल मैप प्रकारों को बदल दें (हालांकि आप उन्हें
मैप से जुड़े लुक को बदलकर मैप
mapTypeControlOptions
).
निम्न कोड मैप को केवल दिखाने के लिए सेट करता है
मैप के mapTypeControlOptions
में दो तरह के मैप
और के साथ संबंध जोड़ने के लिए रजिस्ट्री को संशोधित करता है
इस आइडेंटिफ़ायर को
MapType
इंटरफ़ेस.
// Modify the control to only display two maptypes, the // default ROADMAP and the custom 'mymap'. // Note that because this is an association, we // don't need to modify the MapTypeRegistry beforehand. var MY_MAPTYPE_ID = 'mymaps'; var mapOptions = { zoom: 12, center: brooklyn, mapTypeControlOptions: { mapTypeIds: ['roadmap', MY_MAPTYPE_ID] }, mapTypeId: MY_MAPTYPE_ID }; // Create our map. This creation will implicitly create a // map type registry. map = new google.maps.Map(document.getElementById('map'), mapOptions); // Create your custom map type using your own code. // (See below.) var myMapType = new MyMapType(); // Set the registry to associate 'mymap' with the // custom map type we created, and set the map to // show that map type. map.mapTypes.set(MY_MAPTYPE_ID, myMapType);
स्टाइल किए गए मैप
StyledMapType
आपको अपनी पसंद के मुताबिक प्रज़ेंटेशन बनाने की सुविधा देता है
मानक Google आधार मैप, ऐसे एलिमेंट के विज़ुअल डिसप्ले में बदलाव करता है
से अलग शैली को दर्शाने के लिए सड़कों, पार्कों, और इमारतों का डेटा इकट्ठा किया जाता है.
का इस्तेमाल डिफ़ॉल्ट मैप टाइप में किया जाता है.
StyledMapType
के बारे में ज़्यादा जानकारी के लिए, यहां दी गई गाइड देखें
स्टाइल वाले मैप.
कस्टम मैप के टाइप
Maps JavaScript API, डिसप्ले के साथ काम करता है और साथ ही, इसमें अपनी ज़रूरत के हिसाब से मैप टाइप को मैनेज करें. आपके खुद के मैप की तस्वीरें या टाइल ओवरले हों.
इसके अंदर कई संभावित मैप टाइप लागू किए गए हैं Maps JavaScript API:
- स्टैंडर्ड टाइल सेट जिनमें इमेज होती हैं.
सामूहिक रूप से कार्टोग्राफ़िक मैप बना सकते हैं. ये टाइल
सेट को आधार मैप टाइप के नाम से भी जाना जाता है. ये मैप टाइप
डिफ़ॉल्ट रूप से उपलब्ध मैप टाइप की तरह ही काम करें और काम करें:
roadmap
,satellite
,hybrid
औरterrain
. आप मैप केmapTypes
कलेक्शन में, पसंद के मुताबिक बनाए गए मैप टाइप को Maps JavaScript API में यूज़र इंटरफ़ेस (यूआई) को अनुमति दें अपने पसंद के मुताबिक बनाए गए मैप को स्टैंडर्ड मैप टाइप के तौर पर इस्तेमाल करें (इसे MapType में शामिल करके) उदाहरण के लिए, कंट्रोल). - इमेज टाइल ओवरले, जो पेज के सबसे ऊपर दिखती हैं मौजूदा बुनियादी मैप के टाइप. आम तौर पर, ये मैप का इस्तेमाल अतिरिक्त जानकारी दिखाने के लिए किसी मौजूदा मैप प्रकार को बेहतर बनाने के लिए किया जाता है जानकारी और अक्सर चुनिंदा स्थानों तक ही सीमित होती है और/या ज़ूम लेवल. ध्यान दें कि ये टाइल पारदर्शी हो सकती हैं, इससे आप मौजूदा मैप में सुविधाएं जोड़ सकते हैं.
- बिना इमेज वाले ऐसे मैप जिनका इस्तेमाल करके, इनमें बदलाव किया जा सकता है इससे मैप की जानकारी को उसके सबसे बुनियादी स्तर पर दिखाया जा सकता है.
इनमें से हर विकल्प ऐसी क्लास बनाने पर निर्भर करता है जो
MapType
को लागू करता है
इंटरफ़ेस पर कॉपी करने की सुविधा मिलती है. साथ ही,
ImageMapType
क्लास कुछ बिल्ट-इन सुविधाएं देती है
तस्वीरों के संग्रह वाले मैप को बनाने की प्रोसेस को आसान बनाने के लिए व्यवहार किया जा सकता है.
MapType
इंटरफ़ेस
MapType
लागू करने वाली क्लास बनाने से पहले,
यह समझना ज़रूरी है कि Google Maps,
निर्देशांक तय करता है कि मैप के कौनसे हिस्से दिखाने हैं. आपको ये काम करने होंगे
किसी भी तरह के बेस या ओवरले मैप के लिए, एक जैसा लॉजिक लागू करें.
मैप बनाने के लिए गाइड पढ़ें
और टाइल कोऑर्डिनेट भी शामिल हैं.
पसंद के मुताबिक बनाए गए मैप टाइप में MapType
लागू होना चाहिए
इंटरफ़ेस पर कॉपी करने की सुविधा मिलती है. यह इंटरफ़ेस कुछ प्रॉपर्टी और
ऐसे तरीके जो एपीआई को आपके मैप के लिए अनुरोध भेजने की अनुमति देते हैं
टाइप जब एपीआई तय करता है कि उसे मैप दिखाने की ज़रूरत है
टाइलों को देख सकता है. आपने हैंडल किया
इन अनुरोधों से यह तय होता है कि कौनसी टाइल लोड करनी है.
ध्यान दें: डेवलपर के लिए,
अपनी क्लास का इस्तेमाल करके इस इंटरफ़ेस को लागू करें. इसके अलावा, अगर आपके पास
संगत इमेजरी आप का उपयोग कर सकते हैं
ImageMapType
क्लास जो पहले से लागू करती है
इस इंटरफ़ेस पर क्लिक करें.
MapType
इंटरफ़ेस को लागू करने वाली क्लास
यह ज़रूरी है कि आप नीचे दी गई प्रॉपर्टी को परिभाषित करें और उन्हें भरें:
tileSize
(ज़रूरी है) टाइल का साइज़ बताता है (google.maps.Size
टाइप का है). आकार आयताकार होने चाहिए हालांकि, इसका मतलब है कि उनका साइज़ स्क्वेयर नहीं होना चाहिए.maxZoom
(ज़रूरी है) यह तय करता है कि ज़्यादा से ज़्यादा कितना ज़ूम किया जा सकता है वह स्तर जिस पर इस मैप प्रकार की टाइलें दिखाना है.minZoom
(ज़रूरी नहीं) कम से कम ज़ूम तय करता है इस मैप टाइप की टाइल दिखाने के लिए, लेवल तय करें. डिफ़ॉल्ट रूप से, यह वैल्यू0
है. इसका मतलब है कि कोई कम से कम वैल्यू नहीं है ज़ूम स्तर मौजूद है.name
(वैकल्पिक) इस मैप का नाम बताता है टाइप करें. यह प्रॉपर्टी सिर्फ़ तब ज़रूरी है, जब आपको इस तरह का मैप चाहिए ताकि उसे MapType कंट्रोल में चुना जा सके. (देखें नीचेMapType
कंट्रोल जोड़े जा रहे हैं.)alt
(ज़रूरी नहीं) इसके लिए वैकल्पिक टेक्स्ट बताता है मैप का टाइप, जिसे होवर टेक्स्ट के तौर पर दिखाया जाता है. यह प्रॉपर्टी सिर्फ़ ज़रूरी है अगर आप चाहते हैं कि इस मैप प्रकार को MapType नियंत्रण में चुना जा सके. (MapType
नियंत्रण जोड़ना देखें below.)
इसके अलावा, MapType
इंटरफ़ेस को लागू करने वाली क्लास
नीचे दिए गए तरीके लागू करने होंगे:
-
जब भी एपीआई को खोला जाता है, तब
getTile()
(ज़रूरी है) को कॉल किया जाता है यह तय करता है कि मैप में दी गई प्रॉपर्टी के लिए नई टाइल दिखनी हैं या नहीं व्यूपोर्ट.getTile()
तरीके में, नीचे दी गई जानकारी होनी चाहिए हस्ताक्षर:getTile(tileCoord:Point,zoom:number,ownerDocument:Document):Node
एपीआई यह तय करता है कि उसे
getTile()
को कॉल करने की ज़रूरत है या नहींMapType
कीtileSize
के आधार पर,minZoom
औरmaxZoom
प्रॉपर्टी और मैप के मौजूदा व्यूपोर्ट और ज़ूम स्तर को देखा जा सकता है. हैंडलर इस तरीके के लिए, पास किए गए निर्देशांक के साथ एक एचटीएमएल एलिमेंट देना चाहिए, ज़ूम लेवल और DOM एलिमेंट शामिल किए गए हैं जिन पर टाइल इमेज जोड़नी है. -
जब भी एपीआई को खोला जाता है, तब
releaseTile()
(ज़रूरी नहीं) को कॉल किया जाता है तय करता है कि टाइल को व्यू से हटाने के लिए, मैप को उसे हटाना होगा. इस तरीके में नीचे दिए गए हस्ताक्षर होने चाहिए:releaseTile(tile:Node)
आपको आम तौर पर हर एलिमेंट को हटा देना चाहिए जो मैप में जोड़ने पर मैप की टाइल पर लग जाते थे. उदाहरण के लिए, अगर आपने मैप की टाइल में इवेंट लिसनर अटैच किए हैं तो आपको उन्हें यहां से हटाना चाहिए.
getTile()
तरीका, इसके लिए मुख्य कंट्रोलर के तौर पर काम करता है
तय करें कि दिए गए व्यूपोर्ट में कौनसी टाइल लोड करनी है.
बुनियादी मैप के टाइप
इस तरीके से बनाए गए मैप के टाइप दो तरह के हो सकते हैं
अकेले या ओवरले के रूप में अन्य तरह के मैप के साथ मिलाया जा सके. स्टैंडअलोन
मैप टाइप को बेस मैप टाइप के नाम से जाना जाता है. हो सकता है कि आपको API की ज़रूरत पड़े
इस तरह के कस्टम MapType
के साथ वैसा ही व्यवहार करें जैसा कि किसी अन्य मौजूदा
बुनियादी मैप का टाइप (ROADMAP
, TERRAIN
वगैरह). ऐसा करें
इसलिए, आप अपने कस्टम MapType
को Map
के
mapTypes
प्रॉपर्टी. यह प्रॉपर्टी इस तरह की है
MapTypeRegistry
.
यह कोड, दिखाने के लिए एक बेस MapType
बनाता है
किसी मैप की टाइल, निर्देशांकों का इस्तेमाल करती है, और टाइल की आउटलाइन बनाती है:
TypeScript
/* * This demo demonstrates how to replace default map tiles with custom imagery. * In this case, the CoordMapType displays gray tiles annotated with the tile * coordinates. * * Try panning and zooming the map to see how the coordinates change. */ class CoordMapType { tileSize: google.maps.Size; maxZoom = 19; name = "Tile #s"; alt = "Tile Coordinate Map Type"; constructor(tileSize: google.maps.Size) { this.tileSize = tileSize; } getTile( coord: google.maps.Point, zoom: number, ownerDocument: Document ): HTMLElement { const div = ownerDocument.createElement("div"); div.innerHTML = String(coord); div.style.width = this.tileSize.width + "px"; div.style.height = this.tileSize.height + "px"; div.style.fontSize = "10"; div.style.borderStyle = "solid"; div.style.borderWidth = "1px"; div.style.borderColor = "#AAAAAA"; div.style.backgroundColor = "#E5E3DF"; return div; } releaseTile(tile: HTMLElement): void {} } function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 10, center: { lat: 41.85, lng: -87.65 }, streetViewControl: false, mapTypeId: "coordinate", mapTypeControlOptions: { mapTypeIds: ["coordinate", "roadmap"], style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, }, } ); map.addListener("maptypeid_changed", () => { const showStreetViewControl = (map.getMapTypeId() as string) !== "coordinate"; map.setOptions({ streetViewControl: showStreetViewControl, }); }); // Now attach the coordinate map type to the map's registry. map.mapTypes.set( "coordinate", new CoordMapType(new google.maps.Size(256, 256)) ); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
JavaScript
/* * This demo demonstrates how to replace default map tiles with custom imagery. * In this case, the CoordMapType displays gray tiles annotated with the tile * coordinates. * * Try panning and zooming the map to see how the coordinates change. */ class CoordMapType { tileSize; maxZoom = 19; name = "Tile #s"; alt = "Tile Coordinate Map Type"; constructor(tileSize) { this.tileSize = tileSize; } getTile(coord, zoom, ownerDocument) { const div = ownerDocument.createElement("div"); div.innerHTML = String(coord); div.style.width = this.tileSize.width + "px"; div.style.height = this.tileSize.height + "px"; div.style.fontSize = "10"; div.style.borderStyle = "solid"; div.style.borderWidth = "1px"; div.style.borderColor = "#AAAAAA"; div.style.backgroundColor = "#E5E3DF"; return div; } releaseTile(tile) {} } function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 10, center: { lat: 41.85, lng: -87.65 }, streetViewControl: false, mapTypeId: "coordinate", mapTypeControlOptions: { mapTypeIds: ["coordinate", "roadmap"], style: google.maps.MapTypeControlStyle.DROPDOWN_MENU, }, }); map.addListener("maptypeid_changed", () => { const showStreetViewControl = map.getMapTypeId() !== "coordinate"; map.setOptions({ streetViewControl: showStreetViewControl, }); }); // Now attach the coordinate map type to the map's registry. map.mapTypes.set( "coordinate", new CoordMapType(new google.maps.Size(256, 256)), ); } window.initMap = initMap;अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
सैंपल आज़माएं
ओवरले मैप प्रकार
कुछ तरह के मैप को मौजूदा मैप के सबसे ऊपर काम करने के लिए डिज़ाइन किया गया है प्रकार. इस तरह के मैप में पारदर्शी लेयर हो सकती हैं, जो बताती हैं कि या उपयोगकर्ता को अतिरिक्त डेटा दिखाना.
इन मामलों में, आपको मैप के टाइप को एक अलग इकाई के तौर पर नहीं, बल्कि एक ओवरले की तरह माना जाना चाहिए.
आप सीधे इसका इस्तेमाल करके मौजूदा MapType
में मैप का प्रकार जोड़कर ऐसा कर सकते हैं
Map
की overlayMapTypes
प्रॉपर्टी. इस प्रॉपर्टी में ये शामिल हैं
MapType
में से MVCArray
. सभी तरह के मैप
(बेस और ओवरले)
mapPane
लेयर. ओवरले मैप के टाइप, बुनियादी मैप के ऊपर दिखेंगे
दस्तावेज़ उसी क्रम में अटैच किए जाते हैं जिस क्रम में वे
Map.overlayMapTypes
अरे (ऊपर के इंडेक्स वाले ओवरले)
वैल्यू, कम इंडेक्स वैल्यू वाले ओवरले के सामने दिखती हैं.
नीचे दिया गया उदाहरण पिछले उदाहरण के जैसा है
इसे छोड़कर, हमने एक टाइल ओवरले MapType
बनाया है
ROADMAP
मैप टाइप में सबसे ऊपर:
TypeScript
/* * This demo illustrates the coordinate system used to display map tiles in the * API. * * Tiles in Google Maps are numbered from the same origin as that for * pixels. For Google's implementation of the Mercator projection, the origin * tile is always at the northwest corner of the map, with x values increasing * from west to east and y values increasing from north to south. * * Try panning and zooming the map to see how the coordinates change. */ class CoordMapType implements google.maps.MapType { tileSize: google.maps.Size; alt: string|null = null; maxZoom: number = 17; minZoom: number = 0; name: string|null = null; projection: google.maps.Projection|null = null; radius: number = 6378137; constructor(tileSize: google.maps.Size) { this.tileSize = tileSize; } getTile( coord: google.maps.Point, zoom: number, ownerDocument: Document ): HTMLElement { const div = ownerDocument.createElement("div"); div.innerHTML = String(coord); div.style.width = this.tileSize.width + "px"; div.style.height = this.tileSize.height + "px"; div.style.fontSize = "10"; div.style.borderStyle = "solid"; div.style.borderWidth = "1px"; div.style.borderColor = "#AAAAAA"; return div; } releaseTile(tile: Element): void {} } function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 10, center: { lat: 41.85, lng: -87.65 }, } ); // Insert this overlay map type as the first overlay map type at // position 0. Note that all overlay map types appear on top of // their parent base map. const coordMapType = new CoordMapType(new google.maps.Size(256, 256)) map.overlayMapTypes.insertAt( 0, coordMapType ); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
JavaScript
/* * This demo illustrates the coordinate system used to display map tiles in the * API. * * Tiles in Google Maps are numbered from the same origin as that for * pixels. For Google's implementation of the Mercator projection, the origin * tile is always at the northwest corner of the map, with x values increasing * from west to east and y values increasing from north to south. * * Try panning and zooming the map to see how the coordinates change. */ class CoordMapType { tileSize; alt = null; maxZoom = 17; minZoom = 0; name = null; projection = null; radius = 6378137; constructor(tileSize) { this.tileSize = tileSize; } getTile(coord, zoom, ownerDocument) { const div = ownerDocument.createElement("div"); div.innerHTML = String(coord); div.style.width = this.tileSize.width + "px"; div.style.height = this.tileSize.height + "px"; div.style.fontSize = "10"; div.style.borderStyle = "solid"; div.style.borderWidth = "1px"; div.style.borderColor = "#AAAAAA"; return div; } releaseTile(tile) {} } function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 10, center: { lat: 41.85, lng: -87.65 }, }); // Insert this overlay map type as the first overlay map type at // position 0. Note that all overlay map types appear on top of // their parent base map. const coordMapType = new CoordMapType(new google.maps.Size(256, 256)); map.overlayMapTypes.insertAt(0, coordMapType); } window.initMap = initMap;अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
सैंपल आज़माएं
चित्र मैप प्रकार
आधार मैप के रूप में काम करने के लिए MapType
लागू करना
टाइप करना बहुत समय लेने वाला और मुश्किल काम हो सकता है. एपीआई
एक विशेष क्लास देता है, जो MapType
को लागू करता है
सबसे सामान्य तरह के मैप के लिए इंटरफ़ेस: मैप के टाइप जिनमें शामिल होता है
वाली टाइल से बना होता है.
यह कक्षा, ImageMapType
कक्षा,
को ImageMapTypeOptions
का इस्तेमाल करके बनाया गया है
ऑब्जेक्ट स्पेसिफ़िकेशन, जिनमें नीचे दी गई ज़रूरी जानकारी दी गई है
प्रॉपर्टी:
tileSize
(ज़रूरी है) टाइल का साइज़ बताता है (google.maps.Size
टाइप का है). आकार आयताकार होने चाहिए हालांकि, इसका मतलब है कि उनका साइज़ स्क्वेयर नहीं होना चाहिए.getTileUrl
(ज़रूरी है) फ़ंक्शन के बारे में बताता है, आम तौर पर, एक इनलाइन फ़ंक्शन को लिटरल वैल्यू के तौर पर दिया जाता है, दी गई जानकारी के हिसाब से सही इमेज टाइल को चुनें विश्व निर्देशांक और ज़ूम स्तर.
यह कोड एक बेसिक ImageMapType
को लागू करता है
चांद लगाने वाली, Google की मून टाइलों से. उदाहरण में, नॉर्मलाइज़ेशन का इस्तेमाल किया गया है
फ़ंक्शन का इस्तेमाल करके यह पक्का किया जा सकता है कि टाइल x-ऐक्सिस के साथ दिखें, न कि
आपके मैप का y-ऐक्सिस.
TypeScript
function initMap(): void { const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { center: { lat: 0, lng: 0 }, zoom: 1, streetViewControl: false, mapTypeControlOptions: { mapTypeIds: ["moon"], }, } ); const moonMapType = new google.maps.ImageMapType({ getTileUrl: function (coord, zoom): string { const normalizedCoord = getNormalizedCoord(coord, zoom); if (!normalizedCoord) { return ""; } const bound = Math.pow(2, zoom); return ( "https://mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw" + "/" + zoom + "/" + normalizedCoord.x + "/" + (bound - normalizedCoord.y - 1) + ".jpg" ); }, tileSize: new google.maps.Size(256, 256), maxZoom: 9, minZoom: 0, // @ts-ignore TODO 'radius' does not exist in type 'ImageMapTypeOptions' radius: 1738000, name: "Moon", }); map.mapTypes.set("moon", moonMapType); map.setMapTypeId("moon"); } // Normalizes the coords that tiles repeat across the x axis (horizontally) // like the standard Google map tiles. function getNormalizedCoord(coord, zoom) { const y = coord.y; let x = coord.x; // tile range in one direction range is dependent on zoom level // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc const tileRange = 1 << zoom; // don't repeat across y-axis (vertically) if (y < 0 || y >= tileRange) { return null; } // repeat across x-axis if (x < 0 || x >= tileRange) { x = ((x % tileRange) + tileRange) % tileRange; } return { x: x, y: y }; } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
JavaScript
function initMap() { const map = new google.maps.Map(document.getElementById("map"), { center: { lat: 0, lng: 0 }, zoom: 1, streetViewControl: false, mapTypeControlOptions: { mapTypeIds: ["moon"], }, }); const moonMapType = new google.maps.ImageMapType({ getTileUrl: function (coord, zoom) { const normalizedCoord = getNormalizedCoord(coord, zoom); if (!normalizedCoord) { return ""; } const bound = Math.pow(2, zoom); return ( "https://mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw" + "/" + zoom + "/" + normalizedCoord.x + "/" + (bound - normalizedCoord.y - 1) + ".jpg" ); }, tileSize: new google.maps.Size(256, 256), maxZoom: 9, minZoom: 0, // @ts-ignore TODO 'radius' does not exist in type 'ImageMapTypeOptions' radius: 1738000, name: "Moon", }); map.mapTypes.set("moon", moonMapType); map.setMapTypeId("moon"); } // Normalizes the coords that tiles repeat across the x axis (horizontally) // like the standard Google map tiles. function getNormalizedCoord(coord, zoom) { const y = coord.y; let x = coord.x; // tile range in one direction range is dependent on zoom level // 0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc const tileRange = 1 << zoom; // don't repeat across y-axis (vertically) if (y < 0 || y >= tileRange) { return null; } // repeat across x-axis if (x < 0 || x >= tileRange) { x = ((x % tileRange) + tileRange) % tileRange; } return { x: x, y: y }; } window.initMap = initMap;अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
सैंपल आज़माएं
अनुमान
पृथ्वी एक त्रि-आयामी गोले (करीब) है, जबकि मैप एक सपाट दो-डाइमेंशन वाली सतह है. मैप जिसमें आपको दिखाई देता है Maps JavaScript API, Earth के किसी भी फ़्लैट मैप की तरह ही किसी सपाट सतह पर उस गोले का प्रक्षेपण. अपने सबसे आसान रूप में है, तो प्रोजेक्शन को प्रोजेक्शन के मैप पर निर्देशांकों में अक्षांश/देशांतर की वैल्यू.
Maps JavaScript API में अनुमान लागू करने के लिए
Projection
इंटरफ़ेस. Projection
लागू होने पर, एक निर्देशांक से न सिर्फ़ मैप किया जाना चाहिए
में मदद मिलेगी, लेकिन बाई-डायरेक्शनल मैपिंग होगी. इसका मतलब है कि आपको
Earth निर्देशांक (LatLng
ऑब्जेक्ट) से अनुवाद करने का तरीका बताओ
Projection
क्लास को
दुनिया
कोऑर्डिनेट सिस्टम का इस्तेमाल कर सकते हैं. Google Maps,
मैप बनाने के लिए मर्केटर प्रोजेक्शन
और मैप पर मौजूद इवेंट को
भौगोलिक निर्देशांक. आप इस प्रोजेक्शन को इसके अनुसार पा सकते हैं
Map
पर getProjection()
को कॉल किया जा रहा है
(या मानक आधार MapType
में से कोई भी प्रकार.) ज़्यादातर इस्तेमाल के लिए,
यह स्टैंडर्ड Projection
काफ़ी होगा, लेकिन यह
अपने कस्टम प्रोजेक्शन को परिभाषित और इस्तेमाल करें.
प्रोजेक्शन लागू करना
कस्टम प्रोजेक्शन लागू करते समय, आपको ये कुछ चीज़ें हैं:
- अक्षांश और देशांतर निर्देशांक को मैप करने का फ़ॉर्मूला
कार्टीज़न प्लेन और इसके विपरीत है. (
Projection
इंटरफ़ेस केवल आयताकार निर्देशांक में रूपांतरण का समर्थन करता है.) - बेस टाइल का साइज़. सभी टाइल आयताकार होनी चाहिए.
- "दुनिया का आकार" ज़ूम स्तर 0 पर सेट की गई आधार टाइल का उपयोग करके किसी मैप का. ध्यान दें कि ज़ूम 0 पर एक टाइल वाले मानचित्रों के लिए, दुनिया का आकार और आधार टाइल का साइज़ एक जैसा है.
इसमें कोऑर्डिनेट ट्रांसफ़ॉर्मेशन अनुमान
प्रत्येक प्रोजेक्शन दो विधियां प्रदान करता है जो इन दोनों के बीच अनुवाद करती हैं निर्देशांक प्रणाली, जिसकी सहायता से आप भौगोलिक और दुनिया के निर्देशांक:
Projection.fromLatLngToPoint()
तरीका कन्वर्ज़न दुनिया के निर्देशांक मेंLatLng
की वैल्यू. इस तरीके का इस्तेमाल किया जाता है ओवरले को मैप पर लगाने के लिए (और मैप को सही जगह पर सेट करने के लिए).Projection.fromPointToLatLng()
तरीके से ग्राहक में बदलने परLatLng
वैल्यू में दुनिया निर्देशांक का इस्तेमाल करें. यह विधि का इस्तेमाल इवेंट को बदलने के लिए किया जाता है, जैसे कि भौगोलिक निर्देशांक में मैप.
Google Maps मानता है कि प्रोजेक्शन सीधी दिशा में होते हैं.
आम तौर पर, आप दो मामलों में प्रोजेक्शन का इस्तेमाल कर सकते हैं: दुनिया का मैप बनाने या किसी स्थानीय इलाके का मैप बनाने के लिए. पहले वाले मामले में, आपको यह पक्का करना होगा कि आपका प्रोजेक्शन सीधी और सामान्य स्थिति में भी हो हर देशांतर पर. कुछ प्रोजेक्शन (खास तौर पर शंकु के अनुमान) "स्थानीय तौर पर सामान्य" हो सकता है (यानी कि उत्तर दिशा में पॉइंट करें) लेकिन सही उत्तर से हट जाएं; उदाहरण के लिए, मैप में कुछ डाइमेंशन संदर्भ देशांतर. आप इस तरह के प्रोजेक्शन का इस्तेमाल स्थानीय तौर पर कर सकते हैं, लेकिन जान सकते हैं कि प्रोजेक्शन आवश्यक रूप से सटीक और रूपांतरण है ऐप्लिकेशन से होने वाली गड़बड़ियों की संख्या अपना डिफ़ॉल्ट देशांतर होना चाहिए.
प्रोजेक्शन में मैप टाइल चुनने की सुविधा
अनुमान लगाने की सुविधा का इस्तेमाल, सिर्फ़
प्लेसमेंट या ओवरले के लिए इस्तेमाल किया जा सकता है.
Maps JavaScript API, MapType
का इस्तेमाल करके बुनियादी मैप रेंडर करता है
जिसे Chromebook में, projection
प्रॉपर्टी के तौर पर एलान करना होगा
मैप के प्रोजेक्शन और getTile()
की पहचान की जा रही है
के आधार पर मैप टाइल पुनर्प्राप्त करने के लिए
टाइल
निर्देशांक वैल्यू का इस्तेमाल किया जाता है. टाइल निर्देशांक आधारित हैं
टाइल का बुनियादी साइज़ (जो आयताकार होना चाहिए) और "दुनिया"
साइज़" आपके मैप का, जो आपके मैप की दुनिया का पिक्सल साइज़ है
ज़ूम लेवल 0 पर होना चाहिए. (ज़ूम 0 पर एक टाइल वाले मानचित्रों के लिए, टाइल
साइज़ और दुनिया का साइज़ एक जैसा है.)
अपने MapType
की टाइल के अंदर बेस टाइल का साइज़ तय होता है
tileSize
प्रॉपर्टी. आपने दुनिया का साइज़, सीधे तौर पर तय किया है
आपके प्रोजेक्शन के fromLatLngToPoint()
में
और fromPointToLatLng()
तरीके इस्तेमाल करते हैं.
इमेज चुनना, स्वीकार की गई इन वैल्यू पर निर्भर करता है. इसलिए, यह काम का है
उन इमेज को नाम दें जिन्हें प्रोग्राम के हिसाब से,
पास की गई वैल्यू, जैसे कि
map_zoom_tileX_tileY.png
.
नीचे दिए गए उदाहरण में ImageMapType
के बारे में बताया गया है
इसका इस्तेमाल करके
गैल-पीटर्स प्रोजेक्शन:
TypeScript
// This example defines an image map type using the Gall-Peters // projection. // https://en.wikipedia.org/wiki/Gall%E2%80%93Peters_projection function initMap(): void { // Create a map. Use the Gall-Peters map type. const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 0, center: { lat: 0, lng: 0 }, mapTypeControl: false, } ); initGallPeters(); map.mapTypes.set("gallPeters", gallPetersMapType); map.setMapTypeId("gallPeters"); // Show the lat and lng under the mouse cursor. const coordsDiv = document.getElementById("coords") as HTMLElement; map.controls[google.maps.ControlPosition.TOP_CENTER].push(coordsDiv); map.addListener("mousemove", (event: google.maps.MapMouseEvent) => { coordsDiv.textContent = "lat: " + Math.round(event.latLng!.lat()) + ", " + "lng: " + Math.round(event.latLng!.lng()); }); // Add some markers to the map. map.data.setStyle((feature) => { return { title: feature.getProperty("name") as string, optimized: false, }; }); map.data.addGeoJson(cities); } let gallPetersMapType; function initGallPeters() { const GALL_PETERS_RANGE_X = 800; const GALL_PETERS_RANGE_Y = 512; // Fetch Gall-Peters tiles stored locally on our server. gallPetersMapType = new google.maps.ImageMapType({ getTileUrl: function (coord, zoom) { const scale = 1 << zoom; // Wrap tiles horizontally. const x = ((coord.x % scale) + scale) % scale; // Don't wrap tiles vertically. const y = coord.y; if (y < 0 || y >= scale) return ""; return ( "https://developers.google.com/maps/documentation/" + "javascript/examples/full/images/gall-peters_" + zoom + "_" + x + "_" + y + ".png" ); }, tileSize: new google.maps.Size(GALL_PETERS_RANGE_X, GALL_PETERS_RANGE_Y), minZoom: 0, maxZoom: 1, name: "Gall-Peters", }); // Describe the Gall-Peters projection used by these tiles. gallPetersMapType.projection = { fromLatLngToPoint: function (latLng) { const latRadians = (latLng.lat() * Math.PI) / 180; return new google.maps.Point( GALL_PETERS_RANGE_X * (0.5 + latLng.lng() / 360), GALL_PETERS_RANGE_Y * (0.5 - 0.5 * Math.sin(latRadians)) ); }, fromPointToLatLng: function (point, noWrap) { const x = point.x / GALL_PETERS_RANGE_X; const y = Math.max(0, Math.min(1, point.y / GALL_PETERS_RANGE_Y)); return new google.maps.LatLng( (Math.asin(1 - 2 * y) * 180) / Math.PI, -180 + 360 * x, noWrap ); }, }; } // GeoJSON, describing the locations and names of some cities. const cities = { type: "FeatureCollection", features: [ { type: "Feature", geometry: { type: "Point", coordinates: [-87.65, 41.85] }, properties: { name: "Chicago" }, }, { type: "Feature", geometry: { type: "Point", coordinates: [-149.9, 61.218] }, properties: { name: "Anchorage" }, }, { type: "Feature", geometry: { type: "Point", coordinates: [-99.127, 19.427] }, properties: { name: "Mexico City" }, }, { type: "Feature", geometry: { type: "Point", coordinates: [-0.126, 51.5] }, properties: { name: "London" }, }, { type: "Feature", geometry: { type: "Point", coordinates: [28.045, -26.201] }, properties: { name: "Johannesburg" }, }, { type: "Feature", geometry: { type: "Point", coordinates: [15.322, -4.325] }, properties: { name: "Kinshasa" }, }, { type: "Feature", geometry: { type: "Point", coordinates: [151.207, -33.867] }, properties: { name: "Sydney" }, }, { type: "Feature", geometry: { type: "Point", coordinates: [0, 0] }, properties: { name: "0°N 0°E" }, }, ], }; declare global { interface Window { initMap: () => void; } } window.initMap = initMap;अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
JavaScript
// This example defines an image map type using the Gall-Peters // projection. // https://en.wikipedia.org/wiki/Gall%E2%80%93Peters_projection function initMap() { // Create a map. Use the Gall-Peters map type. const map = new google.maps.Map(document.getElementById("map"), { zoom: 0, center: { lat: 0, lng: 0 }, mapTypeControl: false, }); initGallPeters(); map.mapTypes.set("gallPeters", gallPetersMapType); map.setMapTypeId("gallPeters"); // Show the lat and lng under the mouse cursor. const coordsDiv = document.getElementById("coords"); map.controls[google.maps.ControlPosition.TOP_CENTER].push(coordsDiv); map.addListener("mousemove", (event) => { coordsDiv.textContent = "lat: " + Math.round(event.latLng.lat()) + ", " + "lng: " + Math.round(event.latLng.lng()); }); // Add some markers to the map. map.data.setStyle((feature) => { return { title: feature.getProperty("name"), optimized: false, }; }); map.data.addGeoJson(cities); } let gallPetersMapType; function initGallPeters() { const GALL_PETERS_RANGE_X = 800; const GALL_PETERS_RANGE_Y = 512; // Fetch Gall-Peters tiles stored locally on our server. gallPetersMapType = new google.maps.ImageMapType({ getTileUrl: function (coord, zoom) { const scale = 1 << zoom; // Wrap tiles horizontally. const x = ((coord.x % scale) + scale) % scale; // Don't wrap tiles vertically. const y = coord.y; if (y < 0 || y >= scale) return ""; return ( "https://developers.google.com/maps/documentation/" + "javascript/examples/full/images/gall-peters_" + zoom + "_" + x + "_" + y + ".png" ); }, tileSize: new google.maps.Size(GALL_PETERS_RANGE_X, GALL_PETERS_RANGE_Y), minZoom: 0, maxZoom: 1, name: "Gall-Peters", }); // Describe the Gall-Peters projection used by these tiles. gallPetersMapType.projection = { fromLatLngToPoint: function (latLng) { const latRadians = (latLng.lat() * Math.PI) / 180; return new google.maps.Point( GALL_PETERS_RANGE_X * (0.5 + latLng.lng() / 360), GALL_PETERS_RANGE_Y * (0.5 - 0.5 * Math.sin(latRadians)), ); }, fromPointToLatLng: function (point, noWrap) { const x = point.x / GALL_PETERS_RANGE_X; const y = Math.max(0, Math.min(1, point.y / GALL_PETERS_RANGE_Y)); return new google.maps.LatLng( (Math.asin(1 - 2 * y) * 180) / Math.PI, -180 + 360 * x, noWrap, ); }, }; } // GeoJSON, describing the locations and names of some cities. const cities = { type: "FeatureCollection", features: [ { type: "Feature", geometry: { type: "Point", coordinates: [-87.65, 41.85] }, properties: { name: "Chicago" }, }, { type: "Feature", geometry: { type: "Point", coordinates: [-149.9, 61.218] }, properties: { name: "Anchorage" }, }, { type: "Feature", geometry: { type: "Point", coordinates: [-99.127, 19.427] }, properties: { name: "Mexico City" }, }, { type: "Feature", geometry: { type: "Point", coordinates: [-0.126, 51.5] }, properties: { name: "London" }, }, { type: "Feature", geometry: { type: "Point", coordinates: [28.045, -26.201] }, properties: { name: "Johannesburg" }, }, { type: "Feature", geometry: { type: "Point", coordinates: [15.322, -4.325] }, properties: { name: "Kinshasa" }, }, { type: "Feature", geometry: { type: "Point", coordinates: [151.207, -33.867] }, properties: { name: "Sydney" }, }, { type: "Feature", geometry: { type: "Point", coordinates: [0, 0] }, properties: { name: "0°N 0°E" }, }, ], }; window.initMap = initMap;अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है