खास जानकारी
बाउंड्री पॉलीगॉन के लिए, फ़िल और स्ट्रोक को स्टाइल करने के लिए, FeatureStyleOptions
का इस्तेमाल करें
शैली एट्रिब्यूट को परिभाषित करने और style
प्रॉपर्टी को किसी फ़ीचर लेयर पर
google.maps.FeatureStyleFunction
, जिसमें स्टाइलिंग लॉजिक शामिल है.
निम्न उदाहरण मैप में वाला एक क्षेत्र है.
style
प्रॉपर्टी को
google.maps.FeatureStyleFunction
, जिसमें स्टाइलिंग लॉजिक हो सकता है. स्टाइल
फ़ंक्शन को प्रभावित सुविधा लेयर में हर सुविधा के लिए चलाया जाता है और उसे लागू किया जाता है
स्टाइल प्रॉपर्टी सेट करते समय. इसे अपडेट करने के लिए, आपको शैली सेट करनी होगी
प्रॉपर्टी को फिर से सेट करना है.
किसी फ़ीचर लेयर की सभी सुविधाओं को एक जैसा स्टाइल देने के लिए, style
प्रॉपर्टी को
google.maps.FeatureStyleOptions
. इस मामले में, आपको किसी
सुविधा स्टाइल फ़ंक्शन के साथ काम करता है, क्योंकि लॉजिक की ज़रूरत नहीं होती.
जब स्टाइल फ़ंक्शन लागू किया जाता है, तो उसे हमेशा एक जैसे नतीजे देने चाहिए सुविधाओं के बारे में ज़्यादा जानें. उदाहरण के लिए, अगर आपको सुविधाओं के किसी सेट को रैंडम तरीके से रंगना है, सुविधा शैली फ़ंक्शन में कोई भी रैंडम हिस्सा नहीं होना चाहिए, क्योंकि अनचाहे नतीजे मिल सकते हैं.
यह फ़ंक्शन किसी लेयर में मौजूद हर सुविधा पर काम करता है, इसलिए ऑप्टिमाइज़ेशन अहम है. रेंडरिंग के समय पर असर न पड़े, इसके लिए:
- केवल अपनी ज़रूरत के हिसाब से लेयर चालू करें.
- जब किसी लेयर का इस्तेमाल बंद हो, तो
style
कोnull
पर सेट करें.
इलाके की सुविधा लेयर में किसी पॉलीगॉन को स्टाइल करने के लिए, यह तरीका अपनाएं:
- अगर आपने पहले से ऐसा नहीं किया है, तो शुरू करें में दिए गए चरणों का पालन करें का इस्तेमाल, नया मैप आईडी और मैप स्टाइल बनाने के लिए किया जाता है. पक्का करें कि आपने शहर चालू किया हो फ़ीचर लेयर.
मैप शुरू होने पर, इलाके की जानकारी वाली लेयर का रेफ़रंस पाएं.
featureLayer = map.getFeatureLayer("LOCALITY");
google.maps.FeatureStyleFunction
टाइप की स्टाइल डेफ़िनिशन तय करें.फ़ीचर लेयर में
style
प्रॉपर्टी कोFeatureStyleFunction
पर सेट करें. नीचे दिए गए उदाहरण में, फ़ंक्शन को सिर्फ़google.maps.Feature
, जिसका स्थान आईडी मेल खाता है:TypeScript
// Define a style with purple fill and border. //@ts-ignore const featureStyleOptions: google.maps.FeatureStyleOptions = { strokeColor: '#810FCB', strokeOpacity: 1.0, strokeWeight: 3.0, fillColor: '#810FCB', fillOpacity: 0.5 }; // Apply the style to a single boundary. //@ts-ignore featureLayer.style = (options: { feature: { placeId: string; }; }) => { if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') { // Hana, HI return featureStyleOptions; } };
JavaScript
// Define a style with purple fill and border. //@ts-ignore const featureStyleOptions = { strokeColor: "#810FCB", strokeOpacity: 1.0, strokeWeight: 3.0, fillColor: "#810FCB", fillOpacity: 0.5, }; // Apply the style to a single boundary. //@ts-ignore featureLayer.style = (options) => { if (options.feature.placeId == "ChIJ0zQtYiWsVHkRk8lRoB1RNPo") { // Hana, HI return featureStyleOptions; } };
अगर बताया गया जगह का आईडी नहीं मिलता या नहीं मिलता
चयनित सुविधा प्रकार से मेल खाते हैं, तो शैली लागू नहीं होती है. उदाहरण के लिए,
"न्यूयॉर्क के लिए स्थान आईडी से मेल खाने वाली POSTAL_CODE
परत को शैली देने का प्रयास किया जा रहा है
शहर" तो कोई शैली लागू नहीं की जाएगी.
परत से शैली निकालें
किसी परत से स्टाइल हटाने के लिए, style
को null
पर सेट करें:
featureLayer.style = null;
सुविधाओं को टारगेट करने के लिए जगह के आईडी देखें
क्षेत्रों के जगह के आईडी पाने के लिए:
- नाम के हिसाब से इलाके खोजने के लिए, जगहों के एपीआई और जियोकोडिंग का इस्तेमाल करें, और तय सीमाओं के अंदर के इलाकों के लिए जगह के आईडी पाएं.
- क्लिक इवेंट से डेटा पाना. इससे उस क्षेत्र के हिसाब से सुविधा मिलती है जिस पर क्लिक किया गया है. इससे जगह के आईडी, डिसप्ले नेम, और सुविधा की कैटगरी का ऐक्सेस मिलता है.
क्षेत्र के हिसाब से कवरेज अलग-अलग होता है. ज़्यादा जानकारी के लिए, Google की सीमाओं की कवरेज देखें.
भौगोलिक नाम कई स्रोतों से उपलब्ध हैं, जैसे भौगोलिक नामों पर यूएसजीएस बोर्ड, और अमेरिका Gazetteer की फ़ाइलें.
उदाहरण के तौर पर दिए गए कोड को पूरा करें
TypeScript
let map: google.maps.Map; //@ts-ignore let featureLayer; async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; map = new Map(document.getElementById('map') as HTMLElement, { center: { lat: 20.773, lng: -156.01 }, // Hana, HI zoom: 12, // In the cloud console, configure this Map ID with a style that enables the // "Locality" feature layer. mapId: 'a3efe1c035bad51b', // <YOUR_MAP_ID_HERE>, }); //@ts-ignore featureLayer = map.getFeatureLayer('LOCALITY'); // Define a style with purple fill and border. //@ts-ignore const featureStyleOptions: google.maps.FeatureStyleOptions = { strokeColor: '#810FCB', strokeOpacity: 1.0, strokeWeight: 3.0, fillColor: '#810FCB', fillOpacity: 0.5 }; // Apply the style to a single boundary. //@ts-ignore featureLayer.style = (options: { feature: { placeId: string; }; }) => { if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') { // Hana, HI return featureStyleOptions; } }; } initMap();
JavaScript
let map; //@ts-ignore let featureLayer; async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps"); map = new Map(document.getElementById("map"), { center: { lat: 20.773, lng: -156.01 }, // Hana, HI zoom: 12, // In the cloud console, configure this Map ID with a style that enables the // "Locality" feature layer. mapId: "a3efe1c035bad51b", // <YOUR_MAP_ID_HERE>, }); //@ts-ignore featureLayer = map.getFeatureLayer("LOCALITY"); // Define a style with purple fill and border. //@ts-ignore const featureStyleOptions = { strokeColor: "#810FCB", strokeOpacity: 1.0, strokeWeight: 3.0, fillColor: "#810FCB", fillOpacity: 0.5, }; // Apply the style to a single boundary. //@ts-ignore featureLayer.style = (options) => { if (options.feature.placeId == "ChIJ0zQtYiWsVHkRk8lRoB1RNPo") { // Hana, HI return featureStyleOptions; } }; } initMap();
सीएसएस
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
एचटीएमएल
<html> <head> <title>Boundaries Simple</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- prettier-ignore --> <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script> </body> </html>