تطبيق نمط مضلع للحدود

نظرة عامة

لإضافة نمط إلى اللون المُمتلئ والخط لشكل حدودي، استخدِم 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;

البحث عن أرقام تعريف الأماكن لاستهداف العناصر

للحصول على أرقام تعريف الأماكن للمناطق:

• استخدام واجهات برمجة تطبيقات الأماكن والترميز الجغرافي للبحث عن المناطق حسب الاسم والحصول على أرقام تعريف الأماكن للمناطق الواقعة داخل حدود محددة
• الحصول على البيانات من أحداث النقر يعرض هذا الإجراء العنصر المقابل للمنطقة التي تم النقر عليها، ما يتيح الوصول إلى معرّف المكان والاسم المعروض لفئة نوع العنصر.

تختلف التغطية حسب المنطقة. اطّلِع على تغطية حدود 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