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

प्लैटफ़ॉर्म चुनें: 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(google.maps.FeatureType.LOCALITY);
    index.ts

    JavaScript

    // Get the feature layer.
featureLayer = innerMap.getFeatureLayer(google.maps.FeatureType.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: { feature: { placeId: string; }; }) => {
  if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') { // Hana, HI
    return featureStyleOptions;
  }
};
    index.ts

    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) => {
    if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') { // Hana, HI
        return featureStyleOptions;
    }
};
    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;

async function initMap() {
  // Request needed libraries.
  await google.maps.importLibrary("maps") as google.maps.MapsLibrary;

  // Get the gmp-map element.
  const mapElement = document.querySelector(
    "gmp-map"
  ) as google.maps.MapElement;

  // Get the inner map.
  const innerMap = mapElement.innerMap;

  // Get the feature layer.
  featureLayer = innerMap.getFeatureLayer(google.maps.FeatureType.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: { feature: { placeId: string; }; }) => {
    if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') { // Hana, HI
      return featureStyleOptions;
    }
  };

}

initMap();
index.ts

JavaScript

let featureLayer;
async function initMap() {
    // 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(google.maps.FeatureType.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) => {
        if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') { // Hana, HI
            return featureStyleOptions;
        }
    };
}
initMap();
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>
    <!-- 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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
  </head>
  <body>
    <gmp-map center="20.773,-156.01" zoom="12" map-id="8b37d7206ccf0121d4414bb0">
  </body>
</html>
index.html

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