הודעת אבטחה: נודע לנו על בעיית אבטחה שעשויה להשפיע על אתרים שמשתמשים בספריות ספציפיות של צד שלישי (כולל polyfill.io). בעיה זו עלולה לפעמים להפנות מבקרים אל מחוץ לאתר המיועד ללא ידיעתו או אישור של בעלי האתר. רבות מדוגמאות ה-JavaScript שלנו כללו בעבר הצהרה של סקריפט polyfill.io. הסרנו את הדוגמאות האלה מהדוגמאות. אם השתמשת בדוגמאות JavaScript שלנו שמכילות את ההצהרה הזו, מומלץ להסיר את ההצהרה.

דף זה תורגם על ידי Cloud Translation API.

שכבת נתונים

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

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

סקירה

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

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

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

משרטטים פוליגונים במפה.
הוספת נתוני GeoJSON למפה.
GeoJSON הוא תקן לנתונים גיאו-מרחביים באינטרנט. המחלקה Data תואמת למבנה של GeoJSON בייצוג הנתונים שלו, ומאפשרת להציג בקלות נתוני GeoJSON. אפשר להשתמש בשיטה 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;index.ts

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;index.js

טעינת GeoJSON

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

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

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

TypeScript

let map: google.maps.Map;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 4,
    center: { lat: -28, lng: 137 },
  });

  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson(
    "https://storage.googleapis.com/mapsdevsite/json/google.json"
  );
}

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

JavaScript

let map;

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -28, lng: 137 },
  });
  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson(
    "https://storage.googleapis.com/mapsdevsite/json/google.json",
  );
}

window.initMap = initMap;index.js

להצגת דוגמה

כדאי לנסות דוגמה

JSFiddle.net Google Cloud Shell

קובץ 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

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

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

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

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

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

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

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

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

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

לדוגמה, הקוד הבא קובע את הצבע של כל תו ב-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});

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

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

כדי להחיל כללי עיצוב מיוחדים, אפשר להשתמש בשיטה overrideStyle(). כל המאפיינים שמשנים באמצעות ה-method 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'});
});

צריך להפעיל את ה-method 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. אתם יכולים להוסיף מאזינים לאירועים כדי לאפשר למשתמשים ליצור אינטראקציה עם הנתונים במפה. בדוגמה הבאה, אנחנו מוסיפים אירוע העברת העכבר, שמציג מידע על התכונה מתחת לסמן העכבר.

// Set mouseover event for each feature.
map.data.addListener('mouseover', function(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(). תתבצע קריאה לפונקציה הזו בכל פעם שמאפיינים של תכונה מסוימת מתעדכנים.

בדוגמה הבאה, אנחנו מוסיפים האזנה לאירוע עבור האירוע 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();
});