खास जानकारी
किसी सीमा वाले पॉलीगॉन के लिए फ़िल और स्ट्रोक को स्टाइल करने के लिए, 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 की सीमाओं के कवरेज पर जाएं.
भौगोलिक नाम कई सोर्स से उपलब्ध हैं, जैसे कि भौगोलिक नाम पर यूएसजीएस बोर्ड और यूएस गैज़टियर फ़ाइलें.
उदाहरण कोड को पूरा करें
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 }, 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> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <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>