דף זה תורגם על ידי 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. [Number, Optional] ערך מספרי שמוצג כשהמשתמש מעביר את העכבר מעל האזור הזה. אם נעשה שימוש בעמודה 4, העמודה הזו היא חובה.
4. [String, Optional] טקסט נוסף במחרוזת שמוצג כשהמשתמש מעביר את העכבר מעל האזור הזה.
פורמט 2: כתובת, שם מדינה, מיקומים של שמות אזורים או קודי אזור מטרופוליטניים של ארה"ב. הפורמט הזה פועל עם האפשרות dataMode שמוגדרת ל 'סמנים' או ל 'אזורים'. המיקום מוזן בעמודה אחת, וגם בשתי עמודות אופציונליות:
1. [String, required] מיקום במפה. אפשר להשתמש בפורמטים הבאים:
  - כתובת ספציפית (לדוגמה, "הרצל 160").
  - שם מדינה כמחרוזת (לדוגמה, אנגליה), או קוד ISO-3166 באותיות רישיות או קוד מקביל באנגלית (לדוגמה, "GB" או "UK").
  - שם קוד אזור ISO-3166-2 באותיות רישיות או ערך טקסט מקביל באנגלית (לדוגמה, "US-NJ" או "New Jersey"). הערה: אפשר לציין אזורים רק אם האפשרות dataMode מוגדרת כ-regions.
  - קוד אזור של מטרופוליטן. אלה קודי מטרופולין בני שלוש ספרות שמשמשים להגדרה של אזורים שונים. נתמכים רק קודים של ארה"ב. חשוב לשים לב ש הם לא זהים לקידומות של מספרי טלפון.
2. [Number, Optional] ערך מספרי שמוצג כשהמשתמש מעביר את העכבר מעל האזור הזה. אם נעשה שימוש בעמודה 3, העמודה הזו היא חובה.
3. [String, Optional] טקסט נוסף במחרוזת שמוצג כשהמשתמש מעביר את העכבר מעל האזור הזה.

הערה: במפה יכולות להופיע עד 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	אם True, יוצג מקרא למפה.
`showZoomOut`	boolean	false	אם הערך הוא True, יוצג לחצן עם התווית שצוינה במאפיין `zoomOutLabel`. שימו לב שהלחצן הזה לא מבצע כל פעולה כשלוחצים עליו, חוץ מלהשליך את האירוע `zoomOut`. כדי לשנות את מרחק התצוגה, צריך לצלם את האירוע הזה ולשנות את האפשרות `region`. אפשר לציין את הערך `showZoomOut` רק אם האפשרות `region` קטנה מתצוגת העולם. אחת מהדרכים להפעיל התנהגות של שינוי מרחק התצוגה היא להאזין לאירוע `regionClick`, לשנות את המאפיין `region` לאזור המתאים ולטעון מחדש את המפה.
`zoomOutLabel`	string	'התרחקות'	תווית ללחצן הזום.

שיטות

שיטה	סוג הערך המוחזר	תיאור
`draw(data, options)`	אין	משרטט את המפה. אפשר לחזור לפני סיום השרטוט (פרטים באירוע `drawingDone()`).
`getSelection()`	מערך של רכיבי בחירה	הטמעה רגילה של `getSelection()`. הרכיבים שנבחרו הם שורות. השיטה הזו פועלת רק אם האפשרות `dataMode` היא 'regions'. אפשר לבחור רק אזור עם ערך מוקצה.
`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.