نظرة عامة
خريطة المواقع الجغرافية هي خريطة لبلد أو قارة أو منطقة، وتحتوي على ألوان وقيم مخصّصة لمناطق محدّدة. يتم عرض القيم على شكل مقياس ألوان، ويمكنك تحديد نص تمرير اختياري للمناطق. يتم عرض الخريطة في المتصفح باستخدام مشغل 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. يتم إدخال الموقع الجغرافي في عمودَين، بالإضافة إلى عمودَين اختياريَين:- [الرقم، مطلوب] خط العرض. الأرقام الموجبة هي الشمال والأرقام السالبة جنوبًا.
- [الرقم، مطلوب] خط طول. الأرقام الموجبة هي الشرق، والأرقام السالبة غربية.
- [رقم، اختياري] قيمة رقمية يتم عرضها عندما يحرك المستخدم مؤشر الماوس فوق هذه المنطقة. في حال استخدام العمود 4، سيكون هذا العمود مطلوبًا.
- [سلسلة، اختياري] يتم عرض نص سلسلة إضافي عند تمرير المستخدم مؤشر الماوس فوق هذه المنطقة.
- التنسيق 2: العنوان أو اسم البلد أو مواقع أسماء المناطق أو رموز المناطق الحضرية في الولايات المتحدة يعمل هذا التنسيق مع ضبط الخيار
dataModeعلى "علامات" أو "مناطق". يتم إدخال الموقع الجغرافي في عمود واحد، بالإضافة إلى عمودَين اختياريَين:- [سلسلة، مطلوبة] موقع جغرافي على الخريطة. التنسيقات التالية مقبولة:
- عنوان محدد (على سبيل المثال، "1600 شارع بنسلفانيا").
- اسم البلد كسلسلة (على سبيل المثال، "إنجلترا")، أو رمز ISO-3166 كبير أو ما يكافئه باللغة الإنجليزية (مثل "GB" أو "المملكة المتحدة").
- اسم رمز منطقة بتنسيق ISO-3166-2 كبير أو ما يقابله من النص الإنجليزي (على سبيل المثال، "US-NJ" أو "نيو جيرسي"). ملاحظة: لا يمكن تحديد المناطق إلا عند ضبط خيار dataMode على "المناطق".
- رمز المنطقة الحضري. وتتكوّن هذه الرموز من ثلاث أرقام، وهي تُستخدَم لتحديد مناطق مختلفة، ويمكن استخدام رموز الولايات المتحدة فقط. ويُرجى ملاحظة أن هذه الرموز ليست مثل رموز مناطق الهاتف.
- [رقم، اختياري] قيمة رقمية يتم عرضها عندما يحرك المستخدم مؤشر الماوس فوق هذه المنطقة. في حال استخدام العمود 3، يجب إضافة هذا العمود.
- [سلسلة، اختياري] يتم عرض نص سلسلة إضافي عند تمرير المستخدم مؤشر الماوس فوق هذه المنطقة.
- [سلسلة، مطلوبة] موقع جغرافي على الخريطة. التنسيقات التالية مقبولة:
ملاحظة: يمكن أن تعرض الخريطة 400 إدخال كحد أقصى، وإذا كان جدول البيانات أو 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 الكبير)، أو إحدى السلاسل التالية:
لا تتيح ميزة "الخريطة الجغرافية" سلوك التمرير
أو السحب، بل تعمل فقط على تقييد سلوك التكبير/التصغير. يمكن تفعيل
التصغير الأساسي من خلال ضبط السمة |
dataMode |
سلسلة | "المناطق" | كيفية عرض القيم على الخريطة. تتوفّر قيمتان:
|
width |
سلسلة | "556 بكسل" | عرض التمثيل البصري. وفي حال عدم توفير أي وحدات، ستكون الوحدة التلقائية هي وحدات بكسل. |
height |
سلسلة | "347 بكسل" | ارتفاع التمثيل البصري. وفي حال عدم توفير أي وحدات، ستكون الوحدة التلقائية هي وحدات بكسل. |
colors |
مصفوفة من أرقام RGB بالتنسيق 0xRRGGBB | [0xE0FFD4, 0xA5EF63, 0x50AA00, 0x267114] | تدرج اللون لتعيينه للقيم في التمثيل البصري. يجب أن تكون لديك قيمتان على الأقل. وسيتضمّن التدرج كل القيم، بالإضافة إلى قيم الوسيط المحسوبة، وأقل لون أقل قيمة للأصغر، وأقل درجة داكنة لأعلى قيمة. |
showLegend |
منطقي | صواب | في حال التعيين على "true"، يمكنك عرض وسيلة إيضاح للخريطة. |
showZoomOut |
منطقي | خطأ | في حال التعيين على "true"، يمكنك عرض زر يحمل التصنيف
المحدد في السمة zoomOutLabel. يُرجى ملاحظة أن
هذا الزر لا ينفّذ أي إجراء عند النقر عليه، باستثناء عرض حدث zoomOut.
للتعامل مع التكبير أو التصغير، يمكنك التقاط هذا الحدث وتغيير خيار region.
يمكنك فقط تحديد showZoomOut إذا
كان الخيار region
أصغر من عرض العالم. تتمثل إحدى طرق تفعيل سلوك التكبير أو التصغير في الاستماع إلى الفعالية regionClick، وتغيير
السمة region إلى المنطقة المناسبة، وإعادة تحميل الخريطة. |
zoomOutLabel |
سلسلة | "تصغير" | تصنيف لزر التكبير/التصغير. |
الطرق
| الطريقة | نوع القيمة التي يتم عرضها | الوصف |
|---|---|---|
draw(data, options) |
لا ينطبق | لرسم الخريطة. يمكن الرجوع قبل انتهاء الرسم (يُرجى الاطّلاع على حدث drawingDone()). |
getSelection() |
مصفوفة عناصر التحديد | تنفيذ getSelection() العادي. العناصر المحددة
هي صفوف. لا تعمل هذه الطريقة إلا عندما يكون الخيار dataMode هو "المناطق". يمكنك فقط اختيار منطقة تم تحديد قيمة لها. |
setSelection(selection) |
لا ينطبق | تنفيذ setSelection() العادي. يتعامل مع تحديد
كاختيار صف، ويدعم تحديدات صفوف متعددة. لا يمكن اختيار سوى
المناطق التي تم تحديد قيم لها. |
الأحداث
| الاسم | الوصف | أماكن إقامة |
|---|---|---|
error |
يتم الإطلاق عند حدوث خطأ عند محاولة عرض الرسم البياني. | id، رسالة |
select |
يتم الإطلاق عندما ينقر المستخدم على منطقة ذات قيمة محددة. لمعرفة
ما تم اختياره، يُرجى الاتصال بالرقم ملاحظة: بسبب بعض القيود، لا يتم تجاهل الحدث |
لا ينطبق |
regionClick |
ويتم الاتصال عند النقر على منطقة ما. يعمل مع كل من "المناطق" و"العلامات" ملاحظة: بسبب بعض القيود، لا يتم تجاهل الحدث |
كائن له خاصية واحدة، region، وهي سلسلة بتنسيق ISO-3166 تصف المنطقة التي تم النقر عليها. |
zoomOut |
يتم الاتصال عند النقر على زر التصغير. لمعالجة التكبير أو التصغير، يمكنك تسجيل هذا الحدث وتغيير خيار ملاحظة: بسبب بعض القيود، لا يتم تجاهل الحدث |
لا ينطبق |
drawingDone |
يتم الاتصال عند انتهاء رسم خريطة جغرافية. | لا ينطبق |
سياسة البيانات
يتم ترميز المواقع الجغرافية بواسطة خرائط Google. ولا يتم إرسال أي بيانات لا تتطلب الترميز الجغرافي إلى أي خادم. يُرجى الاطّلاع على بنود خدمة "خرائط Google" للحصول على مزيد من المعلومات حول سياسة البيانات.
ملاحظات
نظرًا لإعدادات أمان Flash، قد لا يعمل هذا (وجميع التمثيلات المستندة إلى Flash) بشكل صحيح عند الدخول إليه من موقع ملف في المتصفح (على سبيل المثال، file:///c:/webhost/myhost/myviz.html) بدلاً من عنوان URL لخادم الويب (على سبيل المثال، http://www.myhost.com/myviz.html). وعادةً ما تكون هذه مشكلة تجريبية فقط. ويمكنك حلّ هذه المشكلة كما هو موضّح في موقع Macromedia الإلكتروني.