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

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

نظرة عامة

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

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

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

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

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

بما أنّ هذه الدالة تعمل على كل عنصر في طبقة معيّنة، من المهم تحسينها. لتجنُّب التأثير في الوقت المستغرَق للعرض:

• فعِّل الطبقات التي تحتاج إليها فقط.
• اضبط style على null عندما لا تكون الطبقة قيد الاستخدام.

لتنسيق مضلّع في طبقة عناصر المنطقة المحلية، اتّبِع الخطوات التالية:

1. إذا لم يسبق لك إجراء ذلك، اتّبِع الخطوات الواردة في مقالة البدء لإنشاء معرّف خريطة ونمط خريطة جديدَين. تأكَّد من تفعيل طبقة عناصر المنطقة.

2. احصل على مرجع لطبقة عناصر المنطقة عند بدء تشغيل الخريطة.

   TypeScript

   // Get the feature layer.
   featureLayer = innerMap.getFeatureLayer('LOCALITY');
   index.ts

   ملاحظة: يُرجى قراءة الدليل حول استخدام TypeScript و"خرائط Google".

   JavaScript

   // Get the feature layer.
   featureLayer = innerMap.getFeatureLayer('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: google.maps.FeatureStyleFunctionOptions) => {
       const feature = options.feature as google.maps.PlaceFeature;
       if (feature.placeId === 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
           // Hana, HI
           return featureStyleOptions;
       }
       return null;
   };
   index.ts

   ملاحظة: يُرجى قراءة الدليل حول استخدام TypeScript و"خرائط Google".

   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) => {
       const feature = options.feature;
       if (feature.placeId === 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
           // Hana, HI
           return featureStyleOptions;
       }
       return null;
   };
   index.js

إذا لم يتم العثور على رقم تعريف المكان المحدّد أو لم يتطابق مع نوع العنصر المحدّد، لن يتم تطبيق النمط. على سبيل المثال، ستؤدي محاولة تصميم طبقة POSTAL_CODE تطابق رقم تعريف المكان لـ "مدينة نيويورك" إلى عدم تطبيق أي نمط.

إزالة النمط من طبقة

لإزالة النمط من طبقة، اضبط style على null:

featureLayer.style = null;

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

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

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

تختلف التغطية حسب المنطقة. يُرجى الاطّلاع على تغطية الحدود في Google لمعرفة التفاصيل.

تتوفّر الأسماء الجغرافية من مصادر متعدّدة، مثل مجلس الأسماء الجغرافية التابع لهيئة المسح الجيولوجي الأمريكية وملفات الدليل الجغرافي في الولايات المتحدة.

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

TypeScript

let featureLayer: google.maps.FeatureLayer;

async function init() {
    // 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('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: google.maps.FeatureStyleFunctionOptions) => {
        const feature = options.feature as google.maps.PlaceFeature;
        if (feature.placeId === 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
            // Hana, HI
            return featureStyleOptions;
        }
        return null;
    };
}

void init();
index.ts

ملاحظة: يُرجى قراءة الدليل حول استخدام TypeScript و"خرائط Google".

JavaScript

let featureLayer;

async function init() {
    // 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('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) => {
        const feature = options.feature;
        if (feature.placeId === 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') {
            // Hana, HI
            return featureStyleOptions;
        }
        return null;
    };
}

void init();
index.js

CSS

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

<html>
    <head>
        <title>Boundaries Simple</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map
            center="20.773,-156.01"
            zoom="12"
            map-id="8b37d7206ccf0121d4414bb0"></gmp-map>
    </body>
</html>
index.html

تجربة عيّنة

JSFiddle.net