बाउंड्री पॉलीगॉन को स्टाइल करना

खास जानकारी

किसी बाउंड्री पॉलीगॉन के फ़िल और स्ट्रोक को स्टाइल करने के लिए, FeatureStyleOptions का इस्तेमाल करके स्टाइल एट्रिब्यूट तय करें. साथ ही, मैप लेयर पर style प्रॉपर्टी को google.maps.FeatureStyleFunction पर सेट करें. इसमें स्टाइलिंग लॉजिक शामिल होता है.

यहां दिए गए उदाहरण में, किसी एक इलाके के लिए बाउंड्री पॉलीगॉन को हाइलाइट करने का तरीका बताया गया है.

बाउंड्री फ़ीचर पर स्टाइल लागू करने के लिए, style प्रॉपर्टी को google.maps.FeatureStyleFunction पर सेट करें. इसमें स्टाइलिंग लॉजिक शामिल हो सकता है. स्टाइल फ़ंक्शन, जिस मैप लेयर पर स्टाइल लागू की गई है उसके हर फ़ीचर पर चलता है. साथ ही, स्टाइल प्रॉपर्टी सेट करने के बाद, यह फ़ंक्शन लागू हो जाता है. इसे अपडेट करने के लिए, आपको स्टाइल प्रॉपर्टी को फिर से सेट करना होगा.

किसी मैप लेयर की सभी सुविधाओं को एक जैसी स्टाइल में सेट करने के लिए, style प्रॉपर्टी को google.maps.FeatureStyleOptions पर सेट करें. इस मामले में, आपको सुविधा की स्टाइल वाले फ़ंक्शन का इस्तेमाल करने की ज़रूरत नहीं है, क्योंकि लॉजिक की ज़रूरत नहीं है.

स्टाइल फ़ंक्शन को सुविधाओं पर लागू करने पर, हमेशा एक जैसे नतीजे मिलने चाहिए. उदाहरण के लिए, अगर आपको सुविधाओं के सेट को रैंडम तरीके से रंगना है, तो रैंडम पार्ट, सुविधा के स्टाइल फ़ंक्शन में नहीं होना चाहिए. ऐसा होने पर, अनचाहे नतीजे मिल सकते हैं.

यह फ़ंक्शन, लेयर की हर सुविधा पर चलता है. इसलिए, ऑप्टिमाइज़ेशन ज़रूरी है. रेंडर होने में लगने वाले समय पर असर न पड़े, इसके लिए:

• सिर्फ़ वे लेयर चालू करें जिनकी आपको ज़रूरत है.
• जब किसी लेयर का इस्तेमाल न किया जा रहा हो, तो style को null पर सेट करें.

इलाके की मैप लेयर में मौजूद पॉलीगॉन को स्टाइल करने के लिए, यह तरीका अपनाएं:

1. अगर आपने अब तक ऐसा नहीं किया है, तो नया मैप आईडी और मैप स्टाइल बनाने के लिए, शुरू करें में दिया गया तरीका अपनाएं. इलाका मैप लेयर को चालू करना न भूलें.

2. मैप के शुरू होने पर, मोहल्ले की मैप लेयर का रेफ़रंस पाएं.

   TypeScript

   // Get the feature layer.
   featureLayer = innerMap.getFeatureLayer('LOCALITY');
   index.ts

   JavaScript

   // Get the feature layer.
   featureLayer = innerMap.getFeatureLayer('LOCALITY');
   index.js

3. google.maps.FeatureStyleFunction टाइप की स्टाइल डेफ़िनिशन बनाएं.

4. मैप लेयर पर style प्रॉपर्टी को FeatureStyleFunction पर सेट करें. यहां दिए गए उदाहरण में, किसी फ़ंक्शन को तय करने का तरीका बताया गया है. इससे, मैच होने वाले जगह के आईडी वाली google.maps.Feature पर ही स्टाइल लागू किया जा सकता है:

   TypeScript

   // Define a style with purple fill and border.
   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.
   featureLayer.style = (options: google.maps.FeatureStyleFunctionOptions) => {
       const feature = options.feature as google.maps.PlaceFeature;
       if (feature.placeId === 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
           // Hana, HI
           return featureStyleOptions;
       }
       return null;
   };
   index.ts

   JavaScript

   // Define a style with purple fill and border.
   const featureStyleOptions = {
       strokeColor: '#810FCB',
       strokeOpacity: 1.0,
       strokeWeight: 3.0,
       fillColor: '#810FCB',
       fillOpacity: 0.5,
   };
   
   // Apply the style to a single boundary.
   featureLayer.style = (options) => {
       const feature = options.feature;
       if (feature.placeId === 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
           // Hana, HI
           return featureStyleOptions;
       }
       return null;
   };
   index.js

अगर जगह का आईडी नहीं मिलता है या चुनी गई सुविधा के टाइप से मैच नहीं करता है, तो स्टाइल लागू नहीं होती है. उदाहरण के लिए, "न्यूयॉर्क शहर" के जगह के आईडी से मैच करने वाली POSTAL_CODE लेयर को स्टाइल करने की कोशिश करने पर, कोई स्टाइल लागू नहीं होगी.

किसी लेयर से स्टाइल हटाना

किसी लेयर से स्टाइल हटाने के लिए, style को null पर सेट करें:

featureLayer.style = null;

सुविधाओं को टारगेट करने के लिए, जगह के आईडी देखना

इलाकों के लिए जगह के आईडी पाने के लिए:

• Places API और जियोकोडिंग का इस्तेमाल करके, नाम के हिसाब से क्षेत्रों को खोजें. साथ ही, तय की गई सीमाओं के अंदर मौजूद क्षेत्रों के लिए, जगह के आईडी पाएं.
• क्लिक इवेंट से डेटा पाना. इससे, क्लिक किए गए इलाके से जुड़ी सुविधा की जानकारी मिलती है. इसमें जगह का आईडी, डिसप्ले नेम, और सुविधा के टाइप की कैटगरी शामिल होती है.

कवरेज, देश/इलाके के हिसाब से अलग-अलग होता है. ज़्यादा जानकारी के लिए, Google की सीमाओं का कवरेज देखें.

भौगोलिक जगहों के नाम कई सोर्स से उपलब्ध होते हैं. जैसे, यूएसजीएस बोर्ड ऑन ज्यॉग्रफ़िक नेम्स और यू॰एस॰ गैज़ेटियर फ़ाइल्स.

कोड का पूरा उदाहरण

let featureLayer: google.maps.FeatureLayer;

async function init() {
    // Request needed libraries.
    await google.maps.importLibrary('maps');

    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map')!;

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Get the feature layer.
    featureLayer = innerMap.getFeatureLayer('LOCALITY');

    // Define a style with purple fill and border.
    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.
    featureLayer.style = (options: google.maps.FeatureStyleFunctionOptions) => {
        const feature = options.feature as google.maps.PlaceFeature;
        if (feature.placeId === 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
            // Hana, HI
            return featureStyleOptions;
        }
        return null;
    };
}

void init();
index.ts

let featureLayer;

async function init() {
    // Request needed libraries.
    await google.maps.importLibrary('maps');

    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map');

    // Get the inner map.
    const innerMap = mapElement.innerMap;

    // Get the feature layer.
    featureLayer = innerMap.getFeatureLayer('LOCALITY');

    // Define a style with purple fill and border.
    const featureStyleOptions = {
        strokeColor: '#810FCB',
        strokeOpacity: 1.0,
        strokeWeight: 3.0,
        fillColor: '#810FCB',
        fillOpacity: 0.5,
    };

    // Apply the style to a single boundary.
    featureLayer.style = (options) => {
        const feature = options.feature;
        if (feature.placeId === 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
            // Hana, HI
            return featureStyleOptions;
        }
        return null;
    };
}

void init();
index.js

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
gmp-map {
    height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
style.css

<html>
    <head>
        <title>Boundaries Simple</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map
            center="20.773,-156.01"
            zoom="12"
            map-id="8b37d7206ccf0121d4414bb0"></gmp-map>
    </body>
</html>
index.html