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

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

खास जानकारी

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

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

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

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

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

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

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

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

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

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;

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

इलाकों के लिए प्लेस आईडी पाने के लिए:

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

कवरेज, इलाके के हिसाब से अलग-अलग होती है. ज़्यादा जानकारी के लिए, 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>

    <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 Cloud Shell