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

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

खास जानकारी

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

नीचे दिए गए मैप में एक क्षेत्र की सीमा के पॉलीगॉन को हाइलाइट किया गया है.

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

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

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

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

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

इलाके की सुविधा लेयर में किसी पॉलीगॉन को स्टाइल करने के लिए, यह तरीका अपनाएं:

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

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

   featureLayer = map.getFeatureLayer("LOCALITY");

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

4. फ़ीचर लेयर में 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;
     }
   };
   index.ts

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

   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;
     }
   };
   index.js

अगर बताया गया जगह का आईडी नहीं मिलता या वह चुनी गई सुविधा के टाइप से मेल नहीं खाता, तो स्टाइल लागू नहीं होगी. उदाहरण के लिए, "न्यूयॉर्क शहर" के लिए जगह के आईडी से मेल खाने वाली 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();
index.ts

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

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();
index.js

ध्यान दें: JavaScript को TypeScript स्निपेट से इकट्ठा किया जाता है.

सीएसएस

/* 
 * 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;
}
style.css

एचटीएमएल

<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>
index.html

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

JSFiddle.net Google क्लाउड शेल