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

اختَر النظام الأساسي: 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 }, // 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

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

تجربة "عيّنة"