به یک چند ضلعی مرزی سبک دهید

نمای کلی

برای استایل‌دهی به پر کردن و خط دور یک چندضلعی مرزی، از FeatureStyleOptions برای تعریف ویژگی‌های استایل استفاده کنید و ویژگی style را روی یک لایه ویژگی روی google.maps.FeatureStyleFunction تنظیم کنید که شامل منطق استایل‌دهی است.

نقشه نمونه زیر، هایلایت کردن چندضلعی مرزی برای یک منطقه واحد را نشان می‌دهد.

با تنظیم ویژگی style روی google.maps.FeatureStyleFunction که می‌تواند شامل منطق استایل‌بندی باشد، سبک را به عوارض مرزی اعمال کنید. تابع style روی هر عارضه در لایه عارضه تحت تأثیر اجرا می‌شود و در زمانی که ویژگی style را تنظیم می‌کنید، اعمال می‌شود. برای به‌روزرسانی آن، باید ویژگی style را دوباره تنظیم کنید.

برای استایل‌دهی یکنواخت به همه عوارض یک لایه ویژگی، ویژگی style را روی google.maps.FeatureStyleOptions تنظیم کنید. در این حالت، نیازی به استفاده از تابع استایل ویژگی ندارید، زیرا منطق لازم نیست.

تابع style باید همیشه نتایج ثابتی را هنگام اعمال روی ویژگی‌ها برگرداند. برای مثال، اگر می‌خواهید مجموعه‌ای از ویژگی‌ها را به صورت تصادفی رنگ‌آمیزی کنید، قسمت تصادفی نباید در تابع style ویژگی رخ دهد، زیرا این امر باعث نتایج ناخواسته می‌شود.

از آنجا که این تابع روی هر ویژگی در یک لایه اجرا می‌شود، بهینه‌سازی آن مهم است. برای جلوگیری از تأثیر بر زمان رندر:

• فقط لایه‌هایی را که نیاز دارید فعال کنید.
• وقتی لایه‌ای دیگر در حال استفاده نیست، style را روی null تنظیم کنید.

برای استایل‌دهی به یک چندضلعی در لایه عارضه محلی، مراحل زیر را انجام دهید:

1. اگر قبلاً این کار را نکرده‌اید، مراحل موجود در بخش «شروع به کار» را برای ایجاد شناسه نقشه و سبک نقشه جدید دنبال کنید. حتماً لایه ویژگی محلی (Locality) را فعال کنید.

2. هنگام مقداردهی اولیه نقشه، به لایه عوارض محلی ارجاع داده شود.

   تایپ اسکریپت

   // Get the feature layer.
   featureLayer = innerMap.getFeatureLayer(google.maps.FeatureType.LOCALITY);
   index.ts

   جاوا اسکریپت

   // Get the feature layer.
   featureLayer = innerMap.getFeatureLayer(google.maps.FeatureType.LOCALITY);
   index.js

3. یک تعریف سبک از نوع google.maps.FeatureStyleFunction ایجاد کنید.

4. ویژگی style را در لایه feature روی FeatureStyleFunction تنظیم کنید. مثال زیر تعریف یک تابع برای اعمال style فقط به google.maps.Feature با شناسه مکان منطبق را نشان می‌دهد:

   تایپ اسکریپت

   // 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

   جاوا اسکریپت

   // 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;

برای هدف قرار دادن ویژگی‌ها، شناسه‌های مکان را جستجو کنید

برای دریافت شناسه مکان برای مناطق:

• از APIهای مکان‌ها و ژئوکدینگ برای جستجوی مناطق بر اساس نام و دریافت شناسه‌های مکان برای مناطق در محدوده‌های مشخص استفاده کنید .
• دریافت داده‌ها از رویدادهای کلیک . این تابع، ویژگی مربوط به ناحیه کلیک شده را برمی‌گرداند که دسترسی به شناسه مکان، نام نمایشی و دسته‌بندی نوع ویژگی را فراهم می‌کند.

پوشش بر اساس منطقه متفاوت است. برای جزئیات بیشتر به پوشش مرزهای گوگل مراجعه کنید.

نام‌های جغرافیایی از منابع زیادی مانند هیئت نام‌های جغرافیایی USGS و فایل‌های فرهنگ جغرافیایی ایالات متحده در دسترس هستند.

کد مثال کامل

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

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