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

प्लैटफ़ॉर्म चुनें: 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 की सीमाओं की कवरेज देखें.

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

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

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