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

הצגה חזותית: מפה גיאוגרפית

סקירה כללית
דוגמאות
בטעינה
פורמט נתונים
אפשרויות הגדרה
שיטות
אירועים
מדיניות נתונים
Notes

סקירה כללית

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

דוגמאות

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

דוגמה לאזורים

סגנון האזורים ממלא אזורים שלמים (בדרך כלל מדינות) בצבעים התואמים לערכים שהוקצה לך. מציינים את סגנון האזורים על ידי הקצאת options['dataMode'] = 'regions' בקוד.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {
        'packages':['geomap'],
        // Note: you will need to get a mapsApiKey for your project.
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
      });
      google.charts.setOnLoadCallback(drawMap);

      function drawMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', 'Popularity'],
          ['Germany', 200],
          ['United States', 300],
          ['Brazil', 400],
          ['Canada', 500],
          ['France', 600],
          ['RU', 700]
        ]);

        var options = {};
        options['dataMode'] = 'regions';

        var container = document.getElementById('regions_div');
        var geomap = new google.visualization.GeoMap(container);

        geomap.draw(data, options);
      };
    </script>
  </head>
  <body>
    <div id="regions_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

דוגמה בתגי עיצוב

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

<html>
<head>
  <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
  <script type='text/javascript'>
   google.charts.load('current', {'packages': ['geomap']});
   google.charts.setOnLoadCallback(drawMap);

    function drawMap() {
      var data = google.visualization.arrayToDataTable([
        ['City', 'Popularity'],
        ['New York', 200],
        ['Boston', 300],
        ['Miami', 400],
        ['Chicago', 500],
        ['Los Angeles', 600],
        ['Houston', 700]
      ]);

      var options = {};
      options['region'] = 'US';
      options['colors'] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors
      options['dataMode'] = 'markers';

      var container = document.getElementById('map_canvas');
      var geomap = new google.visualization.GeoMap(container);
      geomap.draw(data, options);
    };

  </script>
</head>

<body>
    <div id='map_canvas'></div>
</body>

</html>

בטעינה

שם החבילה של google.charts.load הוא "geomap"

  google.charts.load('current', {'packages': ['geomap']});

שם הסיווג של התצוגה החזותית במפה גיאוגרפית הוא google.visualization.GeoMap

  var visualization = new google.visualization.GeoMap(container);

פורמט נתונים

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

פורמט 1: מיקומים של קווי אורך ורוחב. הפורמט הזה פועל רק אם האפשרות dataMode היא 'סמנים'. אם משתמשים בפורמט הזה, אין צורך לכלול את ה-JavaScript של מפת Google. המיקום מוזן בשתי עמודות ושתי עמודות אופציונליות:
1. [מספר, חובה] קו רוחב. מספרים חיוביים הם בצפון, מספרים שליליים הם דרום.
2. [מספר, חובה] קו אורך. מספרים חיוביים הם במזרח, מספרים שליליים מערבים.
3. [מספר, אופציונלי] ערך מספרי שמוצג כשהמשתמש מעביר את העכבר מעל לאזור הזה. אם משתמשים בעמודה 4, צריך להשתמש בעמודה הזו.
4. [מחרוזת, אופציונלי] טקסט נוסף במחרוזת שמוצג כשהמשתמש מעביר את העכבר מעל לאזור הזה.
פורמט 2: כתובת, שם מדינה, מיקומים של שמות אזורים או קידומות עירוניות בארה"ב. פורמט זה פועל עם האפשרות dataMode מוגדרת כ'סמנים' או 'אזורים'. המיקום מוזן בעמודה אחת, בתוספת שתי עמודות אופציונליות:
1. [מחרוזת, חובה] מיקום במפה. ניתן להשתמש בפורמטים הבאים:
  - כתובת ספציפית (לדוגמה, "שדרות פנסיון 1600").
  - שם מדינה כמחרוזת (לדוגמה, 'אנגליה'), או קוד ISO-3166 באותיות גדולות או שווה ערך באנגלית (לדוגמה, 'GB' או 'בריטניה').
  - שם אזור באותיות גדולות מסוג ISO-3166-2 או המקבילה שלו בטקסט באנגלית (לדוגמה, "US-NJ" או "New לבני ג'רזי"). הערה: אפשר לציין אזורים רק כשהאפשרות dataMode מוגדרת ל'אזורים'.
  - אזור חיוג מטרופוליני . אלו הם קודי מטרו תלת-ספרתיים המשמשים להקצאה של אזורים שונים. קודי ארה"ב נתמכים בלבד. חשוב לשים לב שאלו לא זהים לקידומות חיוג.
2. [מספר, אופציונלי] ערך מספרי שמוצג כשהמשתמש מעביר את העכבר מעל לאזור הזה. אם משתמשים בעמודה 3, צריך להשתמש בעמודה הזו.
3. [מחרוזת, אופציונלי] טקסט נוסף במחרוזת שמוצג כשהמשתמש מעביר את העכבר מעל לאזור הזה.

הערה: מפה יכולה להציג עד 400 רשומות. אם DataTable או DataView מכילים יותר מ-400 שורות, יוצגו רק 400 השורות הראשונות. המצבים המהירים ביותר הם dataMode='regions' עם מיקומים שצוינו כקודי ISO ו-dataMode='markers' עם קווי אורך ורוחב. המצב האיטי ביותר הוא dataMode='markers' עם כתובת מחרוזת.

חשוב: הDataTable חייבת לכלול כל עמודה אופציונלית לפני כל עמודה שבה רוצים להשתמש. לדוגמה, אם רוצים לציין טבלה של קווי אורך/רוחב, ואתם רוצים להשתמש רק בעמודות 1 , 2 ו-4, ה-DataTable עדיין צריך להגדיר את עמודה 3 (למרות שלא צריך להוסיף לה ערכים):

dataTable = new google.visualization.DataTable();
dataTable.addRows(1);
dataTable.addColumn('number', 'LATITUDE', 'Latitude');
dataTable.addColumn('number', 'LONGITUDE', 'Longitude');
dataTable.addColumn('number', 'VALUE', 'Value'); // Won't use this column, but still must define it.
dataTable.addColumn('string', 'HOVER', 'HoverText');

dataTable.setValue(0,0,47.00);
dataTable.setValue(0,1,-122.00);
dataTable.setValue(0,3,"Hello World!");

אפשרויות תצורה

שם	סוג	ברירת מחדל	תיאור
`region`	string	'עולם'	האזור שיוצג במפה. (יוצגו גם אזורים מסביב). הקוד יכול להיות קוד מדינה (בפורמט ISO-3166 באותיות רישיות) או אחת מהמחרוזות הבאות: `world` – (כל העולם) `us_metro` – (ארצות הברית, אזורי מטרופולין) `005` – (דרום אמריקה) `013` – (מרכז אמריקה) `021` – (צפון אמריקה) `002` – (כל אפריקה) `017` – (מרכז אפריקה) `015` – (צפון אפריקה) `018` – (דרום אפריקה) `030` – (מזרח אסיה) `034` – (דרום אסיה) `035` – (אזור אסיה/האוקיינוס השקט) `009` – (אוקיאניה) `145` – (המזרח התיכון) `143` – (מרכז אסיה) `151` – (צפון אסיה) `154` – (צפון אירופה) `155` – (מערב אירופה) `039` – (דרום אירופה) מיפוי גיאוגרפי לא מאפשר התנהגות גלילה או גרירה, והתנהגות זום מוגבלת בלבד. אפשר להפעיל הקטנת תצוגה בסיסית על ידי הגדרת המאפיין `showZoomOut`.
`dataMode`	string	'אזורים'	הצגת הערכים במפה. יש שני ערכים נתמכים: `regions` - צביעת אזור שלם בצבע הנכון. לא ניתן להשתמש באפשרות הזו עם כתובות של קווי אורך/רוחב. יש לעיין בקטע דוגמה לאזורים. `markers` – מוצגת נקודה מעל אזור, כשהצבע והגודל מציינים את הערך. ניתן לעיין בדוגמה לסמנים.
`width`	string	'556 פיקסלים'	רוחב ההצגה. אם לא נתת יחידות, יחידת ברירת המחדל היא פיקסלים.
`height`	string	'347 פיקסלים'	גובה התצוגה החזותית. אם לא נתת יחידות, יחידת ברירת המחדל היא פיקסלים.
`colors`	מערך של מספרי RGB בפורמט 0xRRGGBB	[0xE0FFD4, 0xA5EF63, 0x50AA00, 0x267114]	שינוי צבעים הדרגתי כדי להקצות ערכים לוויזואליזציה. חייבים להיות לפחות שני ערכים. ההדרגה תכלול את כל הערכים שלך, וכן את ערכי המתווך המחושבים כשהצבע הבהיר ביותר יהיה את הערך הקטן ביותר ואת הצבע הכהה ביותר כגבוה.
`showLegend`	boolean	נכון	אם True, יש להציג מקרא עבור המפה.
`showZoomOut`	boolean	לא נכון	אם True, יש להציג לחצן עם התווית שצוינה על ידי המאפיין `zoomOutLabel`. חשוב לשים לב שהלחצן הזה לא עושה כלום כשלוחצים עליו, חוץ ממחיקת האירוע `zoomOut`. כדי לשנות את מרחק התצוגה, אפשר לערוך את האירוע ולשנות את האפשרות `region`. אפשר לציין `showZoomOut` רק אם האפשרות `region` קטנה מתצוגת העולם. אחת הדרכים להפעיל שינוי מרחק התצוגה היא להאזין לאירוע ב`regionClick`, לשנות את המאפיין `region` לאזור המתאים ולטעון מחדש את המפה.
`zoomOutLabel`	string	'התרחק'	התווית של לחצן הזום.

שיטות

שיטה	סוג הערך המוחזר	תיאור
`draw(data, options)`	ללא	משרטט את המפה. ניתן לחזור לפני סיום השרטוט (ראו אירוע `drawingDone()`).
`getSelection()`	מערך של רכיבי בחירה	הטמעה רגילה של `getSelection()`. הרכיבים שנבחרו הם שורות. השיטה הזו פועלת רק אם האפשרות `dataMode` היא 'אזורים'. ניתן לבחור רק אזור עם ערך שהוקצה.
`setSelection(selection)`	ללא	הטמעה רגילה של `setSelection()`. התייחסות לבחירה כשורת בחירה, ותמיכה במגוון אפשרויות בחירה. אפשר לבחור רק אזורים עם ערכים שהוקצו.

אירועים

שם	תיאור	נכסים
`error`	מופעל כשמתרחשת שגיאה במהלך הניסיון לעבד את התרשים.	מזהה, הודעה
`select`	מופעל כשהמשתמש לוחץ על אזור עם ערך שהוקצה לו. כדי לדעת מה נבחר, אפשר להתקשר למספר `getSelection()`. האפשרות הזו זמינה רק אם האפשרות `dataMode` מוגדרת ל'אזורים'. הערה: עקב מגבלות מסוימות, האירוע `select` לא יורק אם ניגשים לדף בדפדפן כקובץ (למשל, "file:// ") ולא משרת (למשל, "http://www").	ללא
`regionClick`	מתקשרים כשלוחצים על אזור. פועל גם עבור 'אזורים' וגם עבור 'סמנים' `dataMode`. עם זאת, במצב סשן, המערכת לא תדלג על המדינה הספציפית שנבחרה באפשרות 'אזור' (אם צוינה מדינה ספציפית). הערה: עקב הגבלות מסוימות, האירוע `regionClick` לא יוּרק אם אתם ניגשים לדף בדפדפן כקובץ (למשל, "file:// ") ולא משרת (למשל, "http://www").	אובייקט עם מאפיין יחיד (`region`) שהוא מחרוזת בפורמט ISO-3166 שמתאר את האזור שעליו לוחצים.
`zoomOut`	מתבצעת התקשרות כשלוחצים על הלחצן להקטנת התצוגה. כדי לשנות את מרחק התצוגה, אפשר לערוך את האירוע ולשנות את האפשרות `region`. הערה: עקב מגבלות מסוימות, האירוע `zoomOut` לא יורק אם ניגשים לדף בדפדפן כקובץ (למשל, "file:// ") ולא משרת (למשל, "http://www").	ללא
`drawingDone`	מתבצעת קריאה לאחר שהתרשים הגיאוגרפי סיים לשרטט.	ללא

מדיניות נתונים

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

הערות

בשל הגדרות האבטחה של Flash, ייתכן שהתצורה הזו (וכל הרכיבים החזותיים מבוססי ה-Flash) לא תפעל כראוי כאשר הגישה אליה מתבצעת ממיקום קובץ בדפדפן (לדוגמה, file:///c:/webhost/myhost/myviz.html) ולא מכתובת URL של שרת אינטרנט (למשל, http://www.myhost.com/myviz.html). בדרך כלל מדובר בבעיה בבדיקה בלבד. אפשר להתגבר על הבעיה הזו כפי שמתואר באתר של Macromedia.