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

प्लैटफ़ॉर्म चुनें: 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;

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

क्षेत्रों का आईडी पाने के लिए:

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

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