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

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

نظرة عامة

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

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

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

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

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

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

  • قم بتمكين الطبقات التي تحتاجها فقط.
  • يتم ضبط 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

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