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

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

نظرة عامة

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

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

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

لضبط نمط موحّد لجميع العناصر في طبقة عناصر، اضبط السمة 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) للأسماء الجغرافية) وملفات الجريدة الرسمية.

إكمال نموذج الرمز

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

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 },
    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

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>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <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

تجربة النموذج