שכבת נתונים

בחירת פלטפורמה: Android iOS JavaScript

שכבת הנתונים של מפות Google מספקת מאגר לנתונים גיאו-מרחביים שרירותיים. אתם יכולים להשתמש בשכבת הנתונים כדי לאחסן את הנתונים בהתאמה אישית, או כדי להציג נתוני GeoJSON במפה של Google.

סקירה כללית

כדאי לצפות בסרטון הזה של DevBytes כדי לקבל מידע נוסף על שכבת הנתונים.

באמצעות Maps JavaScript API אתם יכולים להוסיף למפה מגוון שכבות-על, כמו סמנים, קווים פוליגוניים, פוליגונים וכו'. כל אחת מההערות האלה משלבת מידע על סגנון עם נתוני מיקום. הכיתה google.maps.Data היא מאגר לנתונים גיאו-מרחביים שרירותיים. במקום להוסיף את שכבות העל האלה, אתם יכולים להשתמש בשכבת הנתונים כדי להוסיף נתונים גיאוגרפיים שרירותיים למפה. אם הנתונים האלה מכילים צורות גיאומטריות, כמו נקודות, קווים או פוליגונים, ה-API יעבד אותם כסמנים, קווים פוליגוניים ופוליגונים כברירת מחדל. אתם יכולים לעצב את התכונות האלה כמו שכבת-על רגילה, או להחיל כללי עיצוב על סמך מאפיינים אחרים שכלולים בקבוצת הנתונים.

הכיתה google.maps.Data מאפשרת לכם:

  • שרטוט פוליגונים במפה
  • הוספת נתוני GeoJSON למפה
    ‫GeoJSON הוא תקן לנתונים גיאו-מרחביים באינטרנט. המחלקה Data פועלת לפי המבנה של GeoJSON בייצוג הנתונים שלה, ומאפשרת להציג בקלות נתוני GeoJSON. משתמשים ב-method‏ loadGeoJson() כדי לייבא בקלות נתוני GeoJSON ולהציג נקודות, מחרוזות קווים ופוליגונים.
  • משתמשים ב-google.maps.Data כדי ליצור מודלים של נתונים שרירותיים.
    לרוב הישויות בעולם האמיתי יש מאפיינים אחרים שמשויכים אליהן. לדוגמה, לחנויות יש שעות פתיחה, בכבישים יש מהירות תנועה ולכל קבוצה של צופות יש אזור למכירת עוגיות. בעזרת google.maps.Data, אתם יכולים ליצור מודלים של המאפיינים האלה ולעצב את הנתונים בהתאם.
  • בוחרים איך הנתונים יוצגו, ומשנים את דעתכם תוך כדי עבודה.
    שכבת הנתונים מאפשרת לכם לקבל החלטות לגבי התצוגה החזותית של הנתונים והאינטראקציה איתם. לדוגמה, כשמסתכלים על מפה של חנויות נוחות, אפשר לבחור להציג רק את החנויות שמוכרות כרטיסים לתחבורה ציבורית.

שרטוט פוליגון

המחלקה Data.Polygon מטפלת בפיתול של הפוליגון. אפשר להעביר אליו מערך של טבעת לינארית אחת או יותר, שמוגדרות כקואורדינטות של קו רוחב/קו אורך. הטבעת הלינארית הראשונה מגדירה את הגבול החיצוני של הפוליגון. אם מעבירים יותר מטבעת לינארית אחת, הטבעת הלינארית השנייה והטבעות הבאות משמשות להגדרת נתיבים פנימיים (חורים) בפוליגון.

בדוגמה הבאה נוצר פוליגון מלבני עם שני חורים:

TypeScript

// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 6,
      center: { lat: -33.872, lng: 151.252 },
    }
  );

  // Define the LatLng coordinates for the outer path.
  const outerCoords = [
    { lat: -32.364, lng: 153.207 }, // north west
    { lat: -35.364, lng: 153.207 }, // south west
    { lat: -35.364, lng: 158.207 }, // south east
    { lat: -32.364, lng: 158.207 }, // north east
  ];

  // Define the LatLng coordinates for an inner path.
  const innerCoords1 = [
    { lat: -33.364, lng: 154.207 },
    { lat: -34.364, lng: 154.207 },
    { lat: -34.364, lng: 155.207 },
    { lat: -33.364, lng: 155.207 },
  ];

  // Define the LatLng coordinates for another inner path.
  const innerCoords2 = [
    { lat: -33.364, lng: 156.207 },
    { lat: -34.364, lng: 156.207 },
    { lat: -34.364, lng: 157.207 },
    { lat: -33.364, lng: 157.207 },
  ];

  map.data.add({
    geometry: new google.maps.Data.Polygon([
      outerCoords,
      innerCoords1,
      innerCoords2,
    ]),
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 6,
    center: { lat: -33.872, lng: 151.252 },
  });
  // Define the LatLng coordinates for the outer path.
  const outerCoords = [
    { lat: -32.364, lng: 153.207 }, // north west
    { lat: -35.364, lng: 153.207 }, // south west
    { lat: -35.364, lng: 158.207 }, // south east
    { lat: -32.364, lng: 158.207 }, // north east
  ];
  // Define the LatLng coordinates for an inner path.
  const innerCoords1 = [
    { lat: -33.364, lng: 154.207 },
    { lat: -34.364, lng: 154.207 },
    { lat: -34.364, lng: 155.207 },
    { lat: -33.364, lng: 155.207 },
  ];
  // Define the LatLng coordinates for another inner path.
  const innerCoords2 = [
    { lat: -33.364, lng: 156.207 },
    { lat: -34.364, lng: 156.207 },
    { lat: -34.364, lng: 157.207 },
    { lat: -33.364, lng: 157.207 },
  ];

  map.data.add({
    geometry: new google.maps.Data.Polygon([
      outerCoords,
      innerCoords1,
      innerCoords2,
    ]),
  });
}

window.initMap = initMap;

טעינת GeoJSON

‫GeoJSON הוא תקן נפוץ לשיתוף נתונים גיאו-מרחביים באינטרנט. הוא קל וקריא לאנשים, ולכן הוא אידיאלי לשיתוף ולעבודה משותפת. בעזרת שכבת הנתונים, אתם יכולים להוסיף נתוני GeoJSON למפת Google בשורת קוד אחת בלבד.

map.data.loadGeoJson('google.json');

לכל מפה יש אובייקט map.data, שפועל כשכבת נתונים לנתונים גיאו-מרחביים שרירותיים, כולל GeoJSON. כדי לטעון ולהציג קובץ GeoJSON, צריך להפעיל את השיטה loadGeoJSON() של האובייקט data. בדוגמה הבאה אפשר לראות איך מוסיפים מפה וטוענים נתוני GeoJSON חיצוניים.

TypeScript

async function init() {
    await google.maps.importLibrary('maps');

    const mapElement = document.querySelector('gmp-map')!;

    const innerMap = mapElement.innerMap;

    innerMap.data.loadGeoJson('google.json');
}

void init();

JavaScript

async function init() {
    await google.maps.importLibrary('maps');

    const mapElement = document.querySelector('gmp-map');

    const innerMap = mapElement.innerMap;

    innerMap.data.loadGeoJson('google.json');
}

void init();
להצגת דוגמה

חישוב שטח של מגרש והכלה של נקודה בפוליגון בתכונות של GeoJSON

כדי לטעון GeoJSON FeatureCollection בזיכרון (כמו חלקות קרקע של GIS, אזורים קדסטריים או גבולות טריטוריה) בלי לאחזר כתובת URL חיצונית, צריך להפעיל את map.data.addGeoJson(geojsonObject).

הערה לגבי גבולות (Data.Polygon לעומת google.maps.geometry): פונקציות בספרייה geometry, כמו google.maps.geometry.spherical.computeArea() ו-google.maps.geometry.poly.containsLocation(), לא מקבלות אובייקטים מסוג google.maps.Data.Feature או google.maps.Data.Polygon באופן ישיר. כדי לחשב את השטח במטרים רבועים או לבדוק אם קואורדינטה נמצאת בתוך פוליגון GeoJSON, קודם צריך לחלץ את המערך LatLng של הטבעת החיצונית באמצעות feature.getGeometry().getAt(0).getArray():

const { spherical, poly } = await google.maps.importLibrary("geometry");

map.data.forEach((feature) => {
  const geom = feature.getGeometry();
  if (geom.getType() === "Polygon") {
    const outerRingCoords = geom.getAt(0).getArray(); // Array<google.maps.LatLng>
    const areaSqMeters = spherical.computeArea(outerRingCoords);
    const isInside = poly.containsLocation(pointLatLng, new google.maps.Polygon({ paths: outerRingCoords }));
  }
});

‫GeoJSON לדוגמה

רוב הדוגמאות בדף הזה משתמשות בקובץ GeoJSON נפוץ. הקובץ הזה מגדיר את שש האותיות במילה Google כמצולעים מעל אוסטרליה. אתם יכולים להעתיק או לשנות את הקובץ הזה בזמן שאתם בודקים את שכבת הנתונים.

הערה: כדי לטעון קובץ JSON מדומיין אחר, צריך להפעיל בדומיין הזה שיתוף משאבים ממקורות שונים.

כדי לראות את הטקסט המלא של הקובץ, לוחצים על החץ הקטן שליד המילים google.json.

google.json

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "letter": "G",
        "color": "blue",
        "rank": "7",
        "ascii": "71"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [123.61, -22.14], [122.38, -21.73], [121.06, -21.69], [119.66, -22.22], [119.00, -23.40],
            [118.65, -24.76], [118.43, -26.07], [118.78, -27.56], [119.22, -28.57], [120.23, -29.49],
            [121.77, -29.87], [123.57, -29.64], [124.45, -29.03], [124.71, -27.95], [124.80, -26.70],
            [124.80, -25.60], [123.61, -25.64], [122.56, -25.64], [121.72, -25.72], [121.81, -26.62],
            [121.86, -26.98], [122.60, -26.90], [123.57, -27.05], [123.57, -27.68], [123.35, -28.18],
            [122.51, -28.38], [121.77, -28.26], [121.02, -27.91], [120.49, -27.21], [120.14, -26.50],
            [120.10, -25.64], [120.27, -24.52], [120.67, -23.68], [121.72, -23.32], [122.43, -23.48],
            [123.04, -24.04], [124.54, -24.28], [124.58, -23.20], [123.61, -22.14]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "o",
        "color": "red",
        "rank": "15",
        "ascii": "111"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [128.84, -25.76], [128.18, -25.60], [127.96, -25.52], [127.88, -25.52], [127.70, -25.60],
            [127.26, -25.79], [126.60, -26.11], [126.16, -26.78], [126.12, -27.68], [126.21, -28.42],
            [126.69, -29.49], [127.74, -29.80], [128.80, -29.72], [129.41, -29.03], [129.72, -27.95],
            [129.68, -27.21], [129.33, -26.23], [128.84, -25.76]
          ],
          [
            [128.45, -27.44], [128.32, -26.94], [127.70, -26.82], [127.35, -27.05], [127.17, -27.80],
            [127.57, -28.22], [128.10, -28.42], [128.49, -27.80], [128.45, -27.44]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "o",
        "color": "yellow",
        "rank": "15",
        "ascii": "111"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [131.87, -25.76], [131.35, -26.07], [130.95, -26.78], [130.82, -27.64], [130.86, -28.53],
            [131.26, -29.22], [131.92, -29.76], [132.45, -29.87], [133.06, -29.76], [133.72, -29.34],
            [134.07, -28.80], [134.20, -27.91], [134.07, -27.21], [133.81, -26.31], [133.37, -25.83],
            [132.71, -25.64], [131.87, -25.76]
          ],
          [
            [133.15, -27.17], [132.71, -26.86], [132.09, -26.90], [131.74, -27.56], [131.79, -28.26],
            [132.36, -28.45], [132.93, -28.34], [133.15, -27.76], [133.15, -27.17]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "g",
        "color": "blue",
        "rank": "7",
        "ascii": "103"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [138.12, -25.04], [136.84, -25.16], [135.96, -25.36], [135.26, -25.99], [135, -26.90],
            [135.04, -27.91], [135.26, -28.88], [136.05, -29.45], [137.02, -29.49], [137.81, -29.49],
            [137.94, -29.99], [137.90, -31.20], [137.85, -32.24], [136.88, -32.69], [136.45, -32.36],
            [136.27, -31.80], [134.95, -31.84], [135.17, -32.99], [135.52, -33.43], [136.14, -33.76],
            [137.06, -33.83], [138.12, -33.65], [138.86, -33.21], [139.30, -32.28], [139.30, -31.24],
            [139.30, -30.14], [139.21, -28.96], [139.17, -28.22], [139.08, -27.41], [139.08, -26.47],
            [138.99, -25.40], [138.73, -25.00 ], [138.12, -25.04]
          ],
          [
            [137.50, -26.54], [136.97, -26.47], [136.49, -26.58], [136.31, -27.13], [136.31, -27.72],
            [136.58, -27.99], [137.50, -28.03], [137.68, -27.68], [137.59, -26.78], [137.50, -26.54]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "l",
        "color": "green",
        "rank": "12",
        "ascii": "108"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [140.14,-21.04], [140.31,-29.42], [141.67,-29.49], [141.59,-20.92], [140.14,-21.04]
          ]
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "letter": "e",
        "color": "red",
        "rank": "5",
        "ascii": "101"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [
            [144.14, -27.41], [145.67, -27.52], [146.86, -27.09], [146.82, -25.64], [146.25, -25.04],
            [145.45, -24.68], [144.66, -24.60], [144.09, -24.76], [143.43, -25.08], [142.99, -25.40],
            [142.64, -26.03], [142.64, -27.05], [142.64, -28.26], [143.30, -29.11], [144.18, -29.57],
            [145.41, -29.64], [146.46, -29.19], [146.64, -28.72], [146.82, -28.14], [144.84, -28.42],
            [144.31, -28.26], [144.14, -27.41]
          ],
          [
            [144.18, -26.39], [144.53, -26.58], [145.19, -26.62], [145.72, -26.35], [145.81, -25.91],
            [145.41, -25.68], [144.97, -25.68], [144.49, -25.64], [144, -25.99], [144.18, -26.39]
          ]
        ]
      }
    }
  ]
}

עיצוב נתוני GeoJSON

משתמשים ב-method‏ Data.setStyle() כדי לציין איך הנתונים צריכים להיראות. השיטה setStyle() מקבלת ליטרל של אובייקט StyleOptions או פונקציה שמחשבת את הסגנון של כל תכונה.

כללי סגנון פשוטים

הדרך הפשוטה ביותר לעצב תכונות היא להעביר ליטרל של אובייקט StyleOptions אל setStyle(). כך תגדירו סגנון אחד לכל תכונה באוסף. חשוב לדעת שכל סוג של תכונה יכול להציג רק קבוצת משנה של האפשרויות הזמינות. כלומר, אפשר לשלב סגנונות של סוגי תכונות שונים בליטרל של אובייקט אחד. לדוגמה, קטע הקוד הבא מגדיר גם icon בהתאמה אישית, שמשפיע רק על גיאומטריות של נקודות, וגם fillColor, שמשפיע רק על פוליגונים.

map.data.setStyle({
  icon: '//example.com/path/to/image.png',
  fillColor: 'green'
});

מידע נוסף על שילובים חוקיים של סגנונות ותכונות זמין במאמר אפשרויות סגנון.

בדוגמה הבאה מוגדרים צבעי הקו והמילוי של כמה תכונות באמצעות ליטרל של אובייקט StyleOptions. שימו לב שכל פוליגון מעוצב באותו אופן.

TypeScript

async function init() {
    const [{ event }] = await Promise.all([
        google.maps.importLibrary('core'),
        google.maps.importLibrary('maps'),
    ]);

    const mapElement = document.querySelector('gmp-map')!;

    const innerMap = mapElement.innerMap;

    // Load GeoJSON.
    event.addListenerOnce(innerMap, 'idle', () => {
        innerMap.data.loadGeoJson('google.json');
    });

    // Set the stroke width, and fill color for each polygon
    innerMap.data.setStyle({
        fillColor: 'green',
        strokeWeight: 1,
    });
}

void init();

JavaScript

async function init() {
    const [{ event }] = await Promise.all([
        google.maps.importLibrary('core'),
        google.maps.importLibrary('maps'),
    ]);

    const mapElement = document.querySelector('gmp-map');

    const innerMap = mapElement.innerMap;

    // Load GeoJSON.
    event.addListenerOnce(innerMap, 'idle', () => {
        innerMap.data.loadGeoJson('google.json');
    });

    // Set the stroke width, and fill color for each polygon
    innerMap.data.setStyle({
        fillColor: 'green',
        strokeWeight: 1,
    });
}

void init();

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
gmp-map {
    height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

HTML

<html>
    <head>
        <title>Data Layer: Styling</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map center="-28,137" zoom="4"></gmp-map>
    </body>
</html>
להצגת דוגמה

כללי סגנון הצהרתיים

אם רוצים לעדכן את הסגנון של מספר גדול של שכבות-על, כמו סמנים או קווים פוליגוניים, בדרך כלל צריך לעבור על כל שכבת-על במפה ולהגדיר את הסגנון שלה בנפרד. בעזרת שכבת הנתונים, אתם יכולים להגדיר כללים באופן הצהרתי, והם יחולו על כל קבוצת הנתונים. כשהנתונים או הכללים מתעדכנים, הסגנון מוחל באופן אוטומטי על כל תכונה. אפשר להשתמש במאפיינים של ישות כדי להתאים אישית את הסגנון שלה.

לדוגמה, הקוד הבא מגדיר את הצבע של כל תו ב-google.json על ידי בדיקת המיקום שלו בערכת התווים של ASCII. במקרה הזה, קידדנו את מיקום התו יחד עם הנתונים.

// Color Capital letters blue, and lower case letters red.
// Capital letters are represented in ascii by values less than 91
map.data.setStyle(function(feature) {
    var ascii = feature.getProperty('ascii');
    var color = ascii > 91 ? 'red' : 'blue';
    return {
      fillColor: color,
      strokeWeight: 1
    };
});

הסרת הסגנונות

כדי להסיר סגנונות שהוחלו, מעבירים ליטרל של אובייקט ריק ל-method‏ setStyles().

// Remove custom styles.
map.data.setStyle({});

הפעולה הזו תסיר את כל הסגנונות המותאמים אישית שציינתם, והתכונות יעובדו באמצעות סגנונות ברירת המחדל. אם אתם רוצים להפסיק להציג את התכונות, אתם צריכים להגדיר את המאפיין visible של StyleOptions לערך false.

// Hide the Data layer.
map.data.setStyle({visible: false});

שינוי סגנונות ברירת המחדל

כללי העיצוב חלים בדרך כלל על כל תכונה בשכבת הנתונים. עם זאת, לפעמים תרצו להחיל כללי סגנון מיוחדים על תכונות ספציפיות. לדוגמה, כדי להדגיש תכונה מסוימת כשלוחצים עליה.

כדי להחיל כללי עיצוב מיוחדים, משתמשים ב-method‏ overrideStyle(). כל המאפיינים שמשנים באמצעות השיטה overrideStyle() מוחלים בנוסף לסגנונות הגלובליים שכבר צוינו ב-setStyle(). לדוגמה, הקוד הבא ישנה את צבע המילוי של פוליגון בלחיצה, אבל לא יגדיר סגנונות אחרים.

// Set the global styles.
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 3
});

// Set the fill color to red when the feature is clicked.
// Stroke weight remains 3.
map.data.addListener('click', function(event) {
   map.data.overrideStyle(event.feature, {fillColor: 'red'});
});

מפעילים את השיטה revertStyle() כדי להסיר את כל ההגדרות האישיות של הסגנון.

אפשרויות סגנון

האפשרויות הזמינות לעיצוב כל תכונה תלויות בסוג התכונה. לדוגמה, fillColor יופיע רק בגיאומטריות של פוליגונים, ואילו icon יופיע רק בגיאומטריה של נקודות. מידע נוסף זמין במאמרי העזרה של StyleOptions.

זמין בכל הצורות הגיאומטריות

  • ‫clickable: אם הערך הוא true, התכונה מקבלת אירועי עכבר ומגע
  • ‫visible: אם הערך הוא true, התכונה גלויה.
  • ‫zIndex: כל התכונות מוצגות במפה לפי הסדר של zIndex, כאשר ערכים גבוהים יותר מוצגים לפני תכונות עם ערכים נמוכים יותר. סמנים תמיד מוצגים לפני מחרוזות קווים ומצולעים.

זמין בגיאומטריות של נקודות

  • ‫cursor: סמן העכבר שמוצג כשמעבירים את העכבר מעל.
  • ‫icon: הסמל שיוצג לגיאומטריית הנקודה.
  • shape: מגדיר את מפת התמונה שמשמשת לזיהוי פגיעות.
  • title: טקסט שמופיע כשמציבים את הסמן מעל אלמנט.

זמין בגיאומטריות של קווים

  • ‫strokeColor: צבע הקו. כל צבעי CSS3 נתמכים, חוץ מצבעים עם שמות מורחבים.
  • ‫strokeOpacity: אטימות הקו, בין 0.0 ל-1.0.
  • ‫strokeWeight: רוחב הקו בפיקסלים.

זמין בגיאומטריות של פוליגונים

  • ‫fillColor: צבע המילוי. כל צבעי CSS3 נתמכים, חוץ מצבעים עם שמות מורחבים.
  • ‫fillOpacity: מידת האטימות של המילוי בין 0.0 ל-1.0.
  • ‫strokeColor: צבע הקו. כל צבעי CSS3 נתמכים, חוץ מצבעים עם שמות מורחבים.
  • ‫strokeOpacity: אטימות הקו, בין 0.0 ל-1.0.
  • ‫strokeWeight: רוחב הקו בפיקסלים.

הוספת גורמים מטפלים באירועים

התכונות מגיבות לאירועים, כמו mouseup או mousedown. אתם יכולים להוסיף רכיבי event listener כדי לאפשר למשתמשים לבצע אינטראקציה עם הנתונים במפה. בדוגמה הבאה אנחנו מוסיפים אירוע של מעבר עכבר, שמציג מידע על התכונה שמתחת לסמן העכבר.

// Set mouseover event for each feature.
innerMap.data.addListener('mouseover', (event) => {
    document.getElementById('info-box').textContent =
        event.feature.getProperty('letter');
});

אירועים בשכבת הנתונים

האירועים הבאים משותפים לכל התכונות, בלי קשר לסוג הגיאומטריה שלהן:

  • addfeature
  • click
  • dblclick
  • mousedown
  • mouseout
  • mouseover
  • mouseup
  • removefeature
  • removeproperty
  • rightclick
  • setgeometry
  • setproperty

מידע נוסף על האירועים האלה זמין במאמרי העזרה של המחלקה google.maps.data.

שינוי המראה באופן דינמי

כדי להגדיר את הסגנון של שכבת הנתונים, מעבירים פונקציה שמחשבת את הסגנון של כל תכונה ל-method‏ google.maps.data.setStyle(). הפונקציה הזו תיקרא בכל פעם שהמאפיינים של תכונה מסוימת יעודכנו.

בדוגמה הבאה, אנחנו מוסיפים רכיב event listener לאירוע click שמעדכן את המאפיין isColorful של התכונה. הסגנון של התכונה מתעדכן בהתאם לשינוי ברגע שהמאפיין מוגדר.

// Color each letter gray. Change the color when the isColorful property
// is set to true.
map.data.setStyle(function(feature) {
  var color = 'gray';
  if (feature.getProperty('isColorful')) {
    color = feature.getProperty('color');
  }
  return /** @type {!google.maps.Data.StyleOptions} */({
    fillColor: color,
    strokeColor: color,
    strokeWeight: 2
  });
});

// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener('click', function(event) {
  event.feature.setProperty('isColorful', true);
});

// When the user hovers, tempt them to click by outlining the letters.
// Call revertStyle() to remove all overrides. This will use the style rules
// defined in the function passed to setStyle()
map.data.addListener('mouseover', function(event) {
  map.data.revertStyle();
  map.data.overrideStyle(event.feature, {strokeWeight: 8});
});

map.data.addListener('mouseout', function(event) {
  map.data.revertStyle();
});