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

نظرة عامة

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

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

يمكنك تطبيق نمط على ميزات الحدود من خلال ضبط السمة style على google.maps.FeatureStyleFunction، التي يمكن أن تحتوي على منطق التنسيق. يتم تشغيل دالة النمط على كل ميزة في طبقة العناصر المتأثرة، ويتم تطبيقها في الوقت الذي تضبط فيه السمة style. لتعديلها، عليك ضبط السمة 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;

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

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

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

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

تتوفّر الأسماء الجغرافية من مصادر عديدة، مثل الـ مجلس USGS المعني بالأسماء الجغرافية، وملفات U.S. Gazetteer.

مثال على الشفرة الكاملة

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"></gmp-map>
    </body>
</html>
index.html