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

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

نظرة عامة

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

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

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

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

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

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

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

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

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

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 APIs وGeocoding للبحث عن المناطق حسب الاسم، والحصول على أرقام تعريف الأماكن للمناطق ضمن حدود محدّدة
• الحصول على البيانات من أحداث النقر يؤدي ذلك إلى عرض العنصر المقابل للمنطقة التي تم النقر عليها، ما يتيح الوصول إلى معرّف المكان والاسم المعروض وفئة نوع العنصر.

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

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

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

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