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

اختيار النظام الأساسي: Android iOS JavaScript

نظرة عامة

لتصميم التعبئة والحدود لمضلّع حدود، استخدِم 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

   ملاحظة: يمكنك الاطّلاع على الدليل حول استخدام TypeScript و"خرائط Google".

   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 Board on Geographic Names) وملفات دليل الولايات المتحدة الجغرافي (U.S. Gazetteer Files).

مثال كامل على الرمز البرمجي

TypeScript

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

ملاحظة: يمكنك الاطّلاع على الدليل حول استخدام TypeScript و"خرائط Google".

JavaScript

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

ملاحظة: يتم تجميع JavaScript من مقتطف TypeScript.

CSS

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

<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

تجربة عيّنة

JSFiddle.net Google Cloud Shell