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