نظرة عامة
لإضافة نمط إلى اللون المُمتلئ والخط لشكل حدودي، استخدِم FeatureStyleOptions
لتحديد سمات النمط، واضبط السمة style
في طبقة العناصر على
google.maps.FeatureStyleFunction
، التي تحتوي على منطق النمط.
يوضح المثال التالي مضلّع الحدود في منطقة واحدة.
يمكنك تطبيق نمط على عناصر الحدود من خلال ضبط السمة style
على
google.maps.FeatureStyleFunction
، والتي يمكن أن تحتوي على منطق تنسيق. يتمّ تنفيذ دالة النمط
على كلّ سمة في طبقة السمات المتأثرة، ويتمّ تطبيقها
في وقت ضبط سمة النمط. ولتعديله، عليك ضبط سمة style
مرة أخرى.
لتطبيق نمط موحد على جميع العناصر في طبقة عناصر، اضبط السمة style
على
google.maps.FeatureStyleOptions
. في هذه الحالة، لا تحتاج إلى استخدام
دالة نمط الميزة، نظرًا لأن المنطق ليس مطلوبًا.
يجب أن ترجع الدالة style دائمًا نتائج متسقة عند تطبيقها فوق الميزات. على سبيل المثال، إذا أردت تلوين مجموعة من العناصر بشكل عشوائي، يجب ألا يحدث الجزء العشوائي في دالة نمط العناصر، لأنّ ذلك سيؤدي إلى نتائج غير مقصودة.
ولأن هذه الدالة تعمل على كل ميزة في الطبقة، فإن التحسين التحليل. لتجنُّب التأثير في مُدد العرض:
- فعِّل الطبقات التي تحتاج إليها فقط.
- اضبط
style
علىnull
عندما لا تكون الطبقة قيد الاستخدام.
لتصميم مضلّع في طبقة العناصر المحلية، اتّبِع الخطوات التالية:
- يُرجى اتّباع الخطوات الواردة في مقالة البدء إذا لم يسبق لك فعل ذلك. لإنشاء معرّف ونمط خريطة جديدَين. احرص على تفعيل المنطقة المحلية طبقة الخصائص.
الحصول على إشارة إلى طبقة عناصر المنطقة المحلية عند بدء تشغيل الخريطة.
featureLayer = map.getFeatureLayer("LOCALITY");
إنشاء تعريف نمط للنوع
google.maps.FeatureStyleFunction
.اضبط السمة
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; } };
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; } };
إذا لم يتم العثور على معرّف المكان المحدّد أو إذا كان معرّف المكان لا
يتطابق مع نوع العنصر المحدّد، لن يتم تطبيق النمط. على سبيل المثال، لن يؤدي محاولة إضفاء نمط على طبقة POSTAL_CODE
تتطابق مع رقم تعريف المكان "مدينة
نيويورك" إلى تطبيق أي نمط.
إزالة التصميم من طبقة
لإزالة النمط من طبقة، اضبط style
على null
:
featureLayer.style = null;
البحث عن أرقام تعريف الأماكن لاستهداف العناصر
للحصول على أرقام تعريف الأماكن للمناطق:
- استخدام واجهات برمجة تطبيقات الأماكن والترميز الجغرافي للبحث عن المناطق حسب الاسم والحصول على معرّفات الأماكن للمناطق الواقعة ضمن حدود محددة.
- الحصول على البيانات من أحداث النقرات يعرض هذا الإجراء العنصر المقابل للمنطقة التي تم النقر عليها، ما يتيح الوصول إلى معرّف المكان والاسم المعروض لفئة نوع العنصر.
تختلف التغطية حسب المنطقة. اطّلِع على تغطية حدود 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();
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();
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; }
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>