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

نمای کلی

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

نقشه مثال زیر برجسته کردن چندضلعی مرزی برای یک منطقه را نشان می دهد.

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

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

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

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

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

برای استایل دادن به چند ضلعی در لایه ویژگی محلی، مراحل زیر را انجام دهید:

1. اگر قبلاً این کار را انجام نداده اید، برای ایجاد شناسه نقشه و سبک نقشه جدید، مراحل را در Get Started دنبال کنید. حتما لایه ویژگی Locality را فعال کنید.

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

   جاوا اسکریپت

   // 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 و Geocoding برای جستجوی مناطق بر اساس نام و دریافت شناسه مکان برای مناطق در محدوده های مشخص شده استفاده کنید .
• داده‌ها را از رویدادهای کلیک دریافت کنید . این ویژگی مربوط به منطقه ای را که کلیک شده است، برمی گرداند، که دسترسی به شناسه مکان، نام نمایشی، و دسته نوع ویژگی آن را فراهم می کند.

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

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

کد نمونه کامل

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

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

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