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

प्लैटफ़ॉर्म चुनें: Android iOS JavaScript

खास जानकारी

किसी बाउंड्री पॉलीगॉन के फ़िल और स्ट्रोक को स्टाइल करने के लिए, 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

   ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.

   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

   ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.

   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 और Geocoding का इस्तेमाल करें. साथ ही, तय की गई सीमाओं के अंदर मौजूद क्षेत्रों के लिए जगह के आईडी पाएं.
• क्लिक इवेंट से डेटा पाना. यह फ़ंक्शन, क्लिक किए गए इलाके से जुड़ी सुविधा दिखाता है. इससे उस इलाके के आईडी, डिसप्ले नेम, और सुविधा के टाइप की कैटगरी को ऐक्सेस किया जा सकता है.

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

भौगोलिक नामों की जानकारी कई सोर्स से मिलती है. जैसे, USGS Board on Geographic Names और U.S. Gazetteer Files.

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

TypeScript

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

ध्यान दें: TypeScript और Google Maps का इस्तेमाल करने के बारे में गाइड पढ़ें.

JavaScript

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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
            });
        </script>
    </head>
    <body>
        <gmp-map
            center="20.773,-156.01"
            zoom="12"
            map-id="8b37d7206ccf0121d4414bb0"></gmp-map>
    </body>
</html>
index.html

सैंपल आज़माएं

JSFiddle.net