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

نظرة عامة

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

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

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

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

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

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