بررسی اجمالی
نقشه جغرافیایی نقشه ای از یک کشور، قاره یا نقشه منطقه است که رنگ ها و مقادیر به مناطق خاصی اختصاص داده شده است. مقادیر به صورت مقیاس رنگی نمایش داده می شوند و می توانید متن شناور اختیاری را برای مناطق مشخص کنید. نقشه با استفاده از یک فلش پلیر تعبیه شده در مرورگر ارائه می شود. توجه داشته باشید که نقشه قابل پیمایش یا کشیدن نیست، اما میتوان آن را به گونهای پیکربندی کرد که امکان بزرگنمایی را فراهم کند.
مثال ها
ما در اینجا دو مثال داریم: یکی که از سبک نمایش مناطق استفاده می کند و دیگری که از سبک نمایش نشانگرها استفاده می کند.
نمونه مناطق
سبک مناطق کل مناطق (معمولاً کشورها) را با رنگهای مربوط به مقادیری که اختصاص میدهید پر میکند. با اختصاص 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
'نشانگرها' باشد. اگر از این فرمت استفاده می شود، نیازی به گنجاندن جاوا اسکریپت نقشه گوگل ندارید. مکان در دو ستون به اضافه دو ستون اختیاری وارد می شود:- [ شماره، مورد نیاز ] عرض جغرافیایی. اعداد مثبت شمال و اعداد منفی جنوبی هستند.
- [ تعداد، مورد نیاز ] طول جغرافیایی. اعداد مثبت شرقی و اعداد منفی غربی هستند.
- [ شماره، اختیاری ] یک مقدار عددی که وقتی کاربر روی این منطقه قرار می گیرد نمایش داده می شود. در صورت استفاده از ستون 4، این ستون مورد نیاز است.
- [ رشته، اختیاری ] متن رشته اضافی نمایش داده می شود زمانی که کاربر روی این منطقه قرار می گیرد.
- قالب 2: آدرس، نام کشور، مکان نام منطقه، یا کدهای منطقه شهری ایالات متحده. این فرمت با گزینه
dataMode
که روی "نشانگرها" یا "منطقه ها" تنظیم شده است کار می کند. مکان در یک ستون به اضافه دو ستون اختیاری وارد می شود:- [ رشته، مورد نیاز ] مکان نقشه. فرمت های زیر پذیرفته می شود:
- یک آدرس خاص (به عنوان مثال، "خیابان پنسیلوانیا 1600").
- نام کشور به عنوان رشته (مثلاً "England")، یا کد ISO-3166 با حروف بزرگ یا معادل متن انگلیسی آن (به عنوان مثال، "GB" یا "United Kingdom").
- نام کد منطقه ای ISO-3166-2 با حروف بزرگ یا متن انگلیسی معادل آن (به عنوان مثال، "US-NJ" یا "New Jersey"). توجه : مناطق را فقط زمانی می توان مشخص کرد که گزینه dataMode روی 'regions' تنظیم شده باشد.
- یک کد منطقه شهری اینها کدهای سه رقمی مترو هستند که برای تعیین مناطق مختلف استفاده می شوند. کدهای ایالات متحده فقط پشتیبانی می شوند. توجه داشته باشید که اینها با کدهای منطقه تلفن یکسان نیستند .
- [ شماره، اختیاری ] یک مقدار عددی که وقتی کاربر روی این منطقه قرار می گیرد نمایش داده می شود. اگر از ستون 3 استفاده می شود، این ستون مورد نیاز است.
- [ رشته، اختیاری ] متن رشته اضافی نمایش داده می شود زمانی که کاربر روی این منطقه قرار می گیرد.
- [ رشته، مورد نیاز ] مکان نقشه. فرمت های زیر پذیرفته می شود:
توجه: یک نقشه می تواند حداکثر 400 ورودی را نمایش دهد. اگر DataTable یا DataView شما بیش از 400 ردیف داشته باشد، فقط 400 ردیف اول نشان داده می شود. سریع ترین حالت ها dataMode='regions'
با مکان های مشخص شده به عنوان کدهای ISO، و dataMode='markers'
با نهادهای lat/long هستند. کندترین حالت dataMode='markers'
با آدرس رشته ای است.
مهم: DataTable
شما باید شامل هر ستون اختیاری قبل از هر ستونی باشد که می خواهید استفاده کنید. بنابراین، برای مثال، اگر میخواهید یک جدول lat/long مشخص کنید و فقط میخواهید از ستونهای 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 بزرگ) یا یکی از رشته های زیر باشد:
Geomap رفتار پیمایش یا کشیدن را فعال نمی کند و فقط رفتار زوم محدودی را انجام می دهد. با تنظیم ویژگی |
dataMode | رشته | "مناطق" | نحوه نمایش مقادیر روی نقشه دو مقدار پشتیبانی می شود:
|
width | رشته | '556px' | عرض تجسم اگر هیچ واحدی داده نشود، واحد پیش فرض پیکسل است. |
height | رشته | '347px' | ارتفاع تجسم اگر هیچ واحدی داده نشود، واحد پیش فرض پیکسل است. |
colors | آرایه ای از اعداد RGB با فرمت 0xRRGGBB | [0xE0FFD4، 0xA5EF63، 0x50AA00، 0x267114] | گرادیان رنگ برای تخصیص به مقادیر در تجسم. شما باید حداقل دو مقدار داشته باشید. گرادیان شامل تمام مقادیر شما، به اضافه مقادیر واسطه محاسبه شده، با روشن ترین رنگ به عنوان کوچکترین مقدار و تیره ترین رنگ به عنوان بالاترین می شود. |
showLegend | بولی | درست است، واقعی | اگر درست است، یک افسانه برای نقشه نمایش دهید. |
showZoomOut | بولی | نادرست | اگر درست است، دکمه ای با برچسب مشخص شده توسط ویژگی zoomOutLabel نمایش دهید. توجه داشته باشید که این دکمه با کلیک کردن هیچ کاری انجام نمی دهد ، به جز پرتاب رویداد zoomOut . برای مدیریت بزرگنمایی، این رویداد را بگیرید و گزینه region را تغییر دهید. فقط زمانی می توانید showZoomOut مشخص کنید که گزینه region کوچکتر از نمای جهان باشد. یکی از راه های فعال کردن بزرگنمایی رفتار گوش دادن به رویداد regionClick ، تغییر ویژگی region به منطقه مناسب و بارگذاری مجدد نقشه است. |
zoomOutLabel | رشته | 'کوچک نمایی' | برچسب برای دکمه بزرگنمایی. |
مواد و روش ها
روش | نوع برگشت | شرح |
---|---|---|
draw(data, options) | هیچ یک | نقشه را ترسیم می کند. می تواند قبل از انجام ترسیم برگردد (رویداد drawingDone() ببینید). |
getSelection() | آرایه ای از عناصر انتخاب | پیاده سازی استاندارد getSelection() . عناصر انتخاب شده ردیف هستند. این روش فقط زمانی کار می کند که گزینه dataMode 'regions' باشد. شما فقط می توانید منطقه ای را با مقدار اختصاص داده شده انتخاب کنید. |
setSelection( selection ) | هیچ یک | اجرای استاندارد setSelection() . یک انتخاب را به عنوان یک انتخاب ردیف در نظر می گیرد و از چندین انتخاب ردیف پشتیبانی می کند. فقط مناطق با مقادیر اختصاص داده شده را می توان انتخاب کرد. |
مناسبت ها
نام | شرح | خواص |
---|---|---|
error | هنگامی که هنگام تلاش برای ارائه نمودار، خطایی رخ می دهد، فعال می شود. | شناسه، پیام |
select | زمانی فعال می شود که کاربر روی منطقه ای با مقدار اختصاص داده شده کلیک کند. برای اطلاع از آنچه انتخاب شده است، توجه : به دلیل محدودیتهای خاص، اگر به صفحه مرورگر خود بهعنوان فایل (مثلاً "file://") به جای سرور (مثلاً "http://www") دسترسی داشته باشید، رویداد | هیچ یک |
regionClick | زمانی که یک منطقه کلیک می شود، تماس گرفته می شود. هم برای "regions" و هم برای توجه : به دلیل محدودیتهای خاص، اگر به صفحه در مرورگر خود بهعنوان فایل (مثلاً "file://") به جای سرور (مثلاً "http://www") دسترسی داشته باشید، رویداد | یک شی با یک ویژگی منفرد، region ، که رشته ای در قالب ISO-3166 است که منطقه کلیک شده را توصیف می کند. |
zoomOut | هنگامی که دکمه کوچک نمایی کلیک شود، فراخوانی می شود. برای مدیریت بزرگنمایی، این رویداد را بگیرید و گزینه توجه : به دلیل محدودیتهای خاص، اگر به صفحه در مرورگر خود بهعنوان فایل (مثلاً "file://") به جای سرور (مثلاً "http://www") دسترسی داشته باشید، رویداد | هیچ یک |
drawingDone | زمانی که نقشه جغرافیایی ترسیم شد، فراخوانی می شود. | هیچ یک |
سیاست داده
مکان ها توسط نقشه های گوگل کدگذاری جغرافیایی می شوند. هر داده ای که نیاز به کدگذاری جغرافیایی نداشته باشد به هیچ سروری ارسال نمی شود. لطفاً برای اطلاعات بیشتر در مورد خطمشی دادههای آنها ، شرایط خدمات Google Maps را ببینید.
یادداشت
به دلیل تنظیمات امنیتی Flash، این (و همه تجسمهای مبتنی بر Flash) ممکن است هنگام دسترسی از یک مکان فایل در مرورگر (مثلاً file:///c:/webhost/myhost/myviz.html) بهدرستی کار نکند. یک URL سرور وب (به عنوان مثال، http://www.myhost.com/myviz.html). این معمولاً فقط یک مشکل آزمایشی است. همانطور که در وب سایت Macromedia توضیح داده شده است، می توانید بر این مشکل غلبه کنید.