إضفاء نمط على مضلّع حدودي

نظرة عامة

لتصميم التعبئة والحدود لمضلّع حدود، استخدِم FeatureStyleOptions لتحديد سمات التصميم، واضبط السمة style في طبقة عنصر على google.maps.FeatureStyleFunction، الذي يحتوي على منطق التصميم.

توضّح خريطة المثال التالية كيفية تمييز المضلّع الحدودي لمنطقة واحدة.

طبِّق نمطًا على ميزات الحدود من خلال ضبط السمة style على google.maps.FeatureStyleFunction، والتي يمكن أن تحتوي على منطق تصميم. يتم تنفيذ دالة النمط على كل معلم في طبقة المعالم المتأثرة، ويتم تطبيقها عند ضبط خاصية النمط. لتعديلها، يجب ضبط السمة style مرة أخرى.

لتنسيق جميع المعالم بشكل موحّد في طبقة المعالم، اضبط السمة 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

   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 وGeocoding للبحث عن المناطق حسب الاسم، والحصول على أرقام تعريف الأماكن للمناطق ضمن حدود معيّنة.
• الحصول على بيانات من أحداث النقر تعرض هذه الطريقة الميزة المتوافقة مع المنطقة التي تم النقر عليها، ما يتيح الوصول إلى معرّف المكان والاسم المعروض وفئة نوع الميزة.

تختلف التغطية حسب المنطقة. لمزيد من التفاصيل، يمكنك الاطّلاع على تغطية حدود Google.

تتوفّر الأسماء الجغرافية من مصادر عديدة، مثل مجلس 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