סקירה כללית
כדי לעצב את המילוי והקווים בפוליגון של גבולות, יש להשתמש ב-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;
חיפוש מזהי מקומות כדי לטרגט תכונות
כדי לקבל מזהי מקומות של אזורים:
- שימוש בממשקי API ובקידוד גיאוגרפי כדי לחפש אזורים לפי שם, ולקבל מזהי מקומות של אזורים בגבולות שצוינו.
- קבלת נתונים מאירועים מסוג קליק. פעולה זו תחזיר את התכונה התואמת לאזור שעליו לחץ המשתמש, ומספק גישה למזהה המקום, לשם המוצג ולקטגוריה של סוג התכונה.
הכיסוי משתנה בהתאם לאזור. לפרטים נוספים, ראו הגבולות של Google.
שמות גיאוגרפיים זמינים ממקורות רבים, כגון USGS Board on Generative Name, וארה"ב קובצי Gazetteer.
השלמת הקוד לדוגמה
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>