खास जानकारी
बाउंड्री पॉलीगॉन के लिए फ़िल और स्ट्रोक का स्टाइल बनाने के लिए, स्टाइल एट्रिब्यूट तय करने के लिए FeatureStyleOptions
का इस्तेमाल करें. साथ ही, फ़ीचर लेयर पर मौजूद style
प्रॉपर्टी को एक
google.maps.FeatureStyleFunction
पर सेट करें, जिसमें स्टाइलिंग लॉजिक शामिल हो.
नीचे दिए गए मैप में एक क्षेत्र की सीमा के पॉलीगॉन को हाइलाइट किया गया है.
style
प्रॉपर्टी को google.maps.FeatureStyleFunction
पर सेट करके, सीमा से जुड़ी सुविधाओं में स्टाइल लागू करें. इसमें स्टाइलिंग लॉजिक हो सकता है. स्टाइल फ़ंक्शन, प्रभावित सुविधा लेयर में हर सुविधा पर चलाया जाता है. साथ ही, स्टाइल प्रॉपर्टी को सेट करते समय लागू होता है. इसे अपडेट करने के लिए, आपको स्टाइल प्रॉपर्टी को
फिर से सेट करना होगा.
किसी फ़ीचर लेयर की सभी सुविधाओं को एक जैसा स्टाइल देने के लिए, style
प्रॉपर्टी को google.maps.FeatureStyleOptions
पर सेट करें. इस मामले में, आपको फ़ीचर स्टाइल फ़ंक्शन का इस्तेमाल करने की ज़रूरत नहीं है, क्योंकि लॉजिक की ज़रूरत नहीं होती.
जब स्टाइल फ़ंक्शन को सुविधाओं पर लागू किया जाता है, तो उसे हमेशा एक जैसे नतीजे देने चाहिए. उदाहरण के लिए, अगर आपको सुविधाओं के किसी सेट को रैंडम तरीके से रंगना है, तो फ़ीचर स्टाइल फ़ंक्शन में रैंडम पार्ट को शामिल नहीं करना चाहिए, क्योंकि इससे अनचाहे नतीजे मिल सकते हैं.
यह फ़ंक्शन किसी लेयर में मौजूद हर सुविधा पर काम करता है, इसलिए ऑप्टिमाइज़ेशन ज़रूरी है. रेंडरिंग के समय पर असर न पड़े, इसके लिए:
- केवल अपनी ज़रूरत के हिसाब से लेयर चालू करें.
- जब किसी लेयर का इस्तेमाल बंद हो, तो
style
कोnull
पर सेट करें.
इलाके की सुविधा लेयर में किसी पॉलीगॉन को स्टाइल करने के लिए, यह तरीका अपनाएं:
- अगर आपने अभी तक ऐसा नहीं किया है, तो नया मैप आईडी और मैप स्टाइल बनाने के लिए, शुरू करें में दिया गया तरीका अपनाएं. Locality की सुविधा लेयर को चालू करना न भूलें.
मैप शुरू होने पर, इलाके की जानकारी वाली लेयर का रेफ़रंस पाएं.
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 की सीमाओं की कवरेज देखें.
जगहों के नाम कई सोर्स से लिए गए हैं. जैसे, यूएसजीएस बोर्ड ऑन जियोग्राफ़िक नेम और अमेरिका की गज़ेटर फ़ाइलें.
उदाहरण के तौर पर दिए गए कोड को पूरा करें
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
<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>