تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

التصور: خريطة جغرافية

Overview
أمثلة
جارٍ التحميل
تنسيق البيانات
خيارات الإعداد
الطُرق
الأحداث
سياسة البيانات
Notes

نظرة عامة

الخريطة الجغرافية هي خريطة لبلد أو قارة أو منطقة، ويتم تحديد ألوانها وقيمها لمناطق محدّدة. ويتم عرض القيم كمقياس لون، ويمكنك تحديد نص تمرير اختياري للمناطق. يتم عرض الخريطة في المتصفح باستخدام برنامج Flash Player مضمَّن. يُرجى العِلم بأنّ الخريطة غير قابلة للتمرير أو السحب، ولكن يمكن ضبطها للسماح بالتكبير أو التصغير.

أمثلة

لدينا مثالان هنا: أحدهما يستخدم نمط عرض المناطق والثاني يستخدم نمط عرض العلامات.

مثال على المناطق

يملأ نمط المناطق مناطق بأكملها (عادةً البلدان) بالألوان المقابلة للقيم التي تحدّدها. حدِّد نمط المنطقة من خلال تعيين 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 شارع بنسلفانيا").
  - تمثّل هذه السمة اسم البلد كسلسلة (مثل "England")، أو رمز ISO-3166 بأحرف كبيرة أو ما يعادله من نص باللغة الإنجليزية (مثل "GB" أو "المملكة المتحدة").
  - تمثّل هذه السمة اسم رمز المنطقة بتنسيق ISO-3166-2 بأحرف كبيرة أو ما يعادلها من النص باللغة الإنجليزية (على سبيل المثال، "US-NJ" أو "New Jersey"). ملاحظة: لا يمكن تحديد المناطق إلا عند ضبط خيار 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`	سلسلة	"العالم"	المنطقة المراد عرضها على الخريطة. (سيتم أيضًا عرض المناطق المحيطة). يمكن أن يكون رمز بلد (بتنسيق ISO-3166 بأحرف كبيرة)، أو إحدى السلاسل التالية: `world` - (في جميع أنحاء العالم) `us_metro` - (الولايات المتحدة، المناطق المركزية) `005` - (أمريكا الجنوبية) `013` - (أمريكا الوسطى) `021` - (أمريكا الشمالية) `002` - (كل أفريقيا) `017` - (إفريقيا الوسطى) `015` - (شمال أفريقيا) `018` - (جنوب أفريقيا) `030` - (آسيا الشرقية) `034` - (جنوب آسيا) `035` - (منطقة آسيا/المحيط الهادئ) `009` - (أوقيانيا) `145` - (الشرق الأوسط) `143` - (آسيا الوسطى) `151` - (شمال آسيا) `154` - (أوروبا الشمالية) `155` - (أوروبا الغربية) `039` - (أوروبا الجنوبية) لا تتيح الخريطة الجغرافية سلوك التمرير أو السحب، بل تعمل فقط على سلوك تكبير/تصغير محدود. يمكن تفعيل ميزة التصغير الأساسية من خلال ضبط السمة `showZoomOut`.
`dataMode`	سلسلة	"المناطق"	كيفية عرض القيم على الخريطة يمكن إدخال قيمتَين: `regions` - ألوان منطقة بأكملها باستخدام اللون المناسب. لا يمكن استخدام هذا الخيار مع عناوين خطوط الطول/العرض. اطّلِع على مثال المناطق. `markers` - لعرض نقطة فوق منطقة، مع الإشارة إلى القيمة واللون والحجم. راجِع مثال على العلامات.
`width`	سلسلة	"556 بكسل"	عرض التمثيل البصري. وإذا لم يتم توفير أي وحدات، ستكون الوحدة التلقائية هي وحدات البكسل.
`height`	سلسلة	"347 بكسل"	ارتفاع التصور. وإذا لم يتم توفير أي وحدات، ستكون الوحدة التلقائية هي وحدات البكسل.
`colors`	مصفوفة من أرقام نموذج أحمر أخضر أزرق بالتنسيق 0xRRGGBB	[0xE0FFD4، 0xA5EF63، 0x50AA00، 0x267114]	تدرج الألوان الذي يجب تحديده للقيم في التمثيل البصري يجب أن يكون لديك قيمتان على الأقل، وسيتضمن التدرج جميع القيم، بالإضافة إلى القيم الوسيطة المحسوبة، على أن يكون اللون الأفتح كأصغر قيمة واللون الأغمق باعتباره الأعلى.
`showLegend`	boolean	صحيح	إذا كانت القيمة true، يمكنك عرض وسيلة إيضاح للخريطة.
`showZoomOut`	boolean	false	إذا كانت القيمة هي true، يمكنك عرض زر يتضمّن التصنيف الذي تحدّده السمة `zoomOutLabel`. يُرجى العِلم أنّه لا يحدث أي تغيير على هذا الزر عند النقر عليه، باستثناء عرض الحدث `zoomOut`. للتعامل مع التكبير أو التصغير، يمكنك مشاهدة هذا الحدث وتغيير الخيار `region`. لا يمكنك تحديد `showZoomOut` إلا إذا كان الخيار `region` أصغر من طريقة عرض العالم. وتشمل إحدى طرق تفعيل سلوك التكبير الاستماع إلى حدث `regionClick`، وتغيير السمة `region` إلى المنطقة المناسبة، ثم إعادة تحميل الخريطة.
`zoomOutLabel`	سلسلة	"تصغير"	تسمية لزر التكبير/التصغير.

الطُرق

الطريقة	نوع القيمة التي يتم عرضها	الوصف
`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). وعادةً ما تكون هذه مشكلة في الاختبار فقط. يمكنك التغلب على هذه المشكلة على النحو الموضّح في الموقع الإلكتروني الخاص بـ Mirrormedia.