Ringkasan
Geomap adalah peta negara, benua, atau peta wilayah, dengan warna dan nilai yang ditetapkan ke wilayah tertentu. Nilai ditampilkan dalam skala warna, dan Anda dapat menentukan pengarahan teks opsional untuk wilayah tertentu. Peta dirender di browser menggunakan pemutar Flash tersemat. Perhatikan, peta tidak dapat di-scroll atau ditarik, tetapi dapat dikonfigurasi untuk mengizinkan zoom.
Contoh
Kami memiliki dua contoh di sini: satu yang menggunakan gaya tampilan wilayah, dan satu lagi yang menggunakan gaya tampilan penanda.
Contoh Region
Gaya wilayah mengisi seluruh wilayah (biasanya negara) dengan warna yang sesuai dengan nilai yang Anda tetapkan. Tentukan gaya wilayah dengan menetapkan options['dataMode']
= 'regions' di kode Anda.
<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>
Contoh Penanda
Gaya "penanda" menampilkan lingkaran, berukuran, dan berwarna untuk menunjukkan nilai, di atas wilayah yang Anda tentukan.
<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>
Memuat
Nama paket google.charts.load adalah "geomap"
google.charts.load('current', {'packages': ['geomap']});
Nama class visualisasi geomap adalah google.visualization.GeoMap
var visualization = new google.visualization.GeoMap(container);
Format Data
Dua format alamat didukung, yang masing-masing mendukung jumlah kolom yang berbeda, dan jenis data yang berbeda untuk setiap kolom. Semua alamat dalam tabel harus menggunakan salah satunya; Anda tidak dapat mencampurkan jenis.
- Format 1: Lokasi Lintang/Bujur. Format ini hanya berfungsi jika opsi
dataModeadalah 'penanda'. Jika format ini digunakan, Anda tidak perlu menyertakan JavaScript Google Maps. Lokasi dimasukkan dalam dua kolom, ditambah dua kolom opsional:- [Angka, Wajib] Lintang. Angka positif adalah utara, angka negatif adalah selatan.
- [Angka, Wajib] Bujur. Angka positif adalah timur, angka negatif adalah barat.
- [Angka, Opsional] Nilai numerik yang ditampilkan saat pengguna mengarahkan kursor ke wilayah ini. Jika kolom 4 digunakan, kolom ini wajib diisi.
- [String, Opsional] Teks string tambahan ditampilkan saat pengguna mengarahkan kursor ke wilayah ini.
- Format 2: Alamat, nama negara, lokasi nama wilayah, atau kode area metropolitan
AS. Format ini berfungsi dengan opsi
dataModeyang ditetapkan ke 'penanda' atau 'wilayah'. Lokasi dimasukkan dalam satu kolom, ditambah dua kolom opsional:- [String, Wajib] Lokasi peta. Format berikut
diterima:
- Alamat tertentu (misalnya, "1600 Pennsylvania Ave").
- Nama negara sebagai string (misalnya, "Inggris"), atau kode ISO-3166 huruf besar atau teks bahasa Inggris yang setara (misalnya, "GB" atau "Inggris Raya").
- Nama kode wilayah ISO-3166-2 huruf besar atau teks Inggris yang setara (misalnya, "US-NJ" atau "New Jersey"). Catatan: Wilayah hanya dapat ditentukan jika opsi dataMode ditetapkan ke 'region'.
- Kode area metropolitan. Ini adalah kode metro tiga digit yang digunakan untuk menentukan berbagai wilayah; kode AS hanya didukung. Perhatikan bahwa alamat ini tidak sama dengan kode area telepon.
- [Angka, Opsional] Nilai numerik yang ditampilkan saat pengguna mengarahkan kursor ke wilayah ini. Jika kolom 3 digunakan, kolom ini wajib diisi.
- [String, Opsional] Teks string tambahan ditampilkan saat pengguna mengarahkan kursor ke wilayah ini.
- [String, Wajib] Lokasi peta. Format berikut
diterima:
Catatan: Peta dapat menampilkan maksimum 400 entri; jika DataTable atau DataView Anda memiliki lebih dari 400 baris, hanya 400 baris pertama yang akan ditampilkan. Mode tercepat adalah dataMode='regions' dengan lokasi
yang ditentukan sebagai kode ISO, dan dataMode='markers' dengan atribut lintang/bujur. Mode paling lambat adalah dataMode='markers' dengan alamat string.
Penting: DataTable harus menyertakan setiap kolom opsional sebelum kolom apa pun yang ingin digunakan. Jadi, misalnya, jika Anda ingin
menentukan tabel lintang/bujur, dan hanya ingin menggunakan kolom 1, 2, dan 4, DataTable Anda masih
harus menentukan kolom 3 (meskipun Anda tidak perlu menambahkan nilai apa pun):
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!");
Opsi Konfigurasi
| Name | Jenis | Default | Deskripsi |
|---|---|---|---|
region |
string | 'dunia' | Area yang akan ditampilkan di peta. (Area sekitarnya juga akan ditampilkan.) Dapat berupa kode negara (dalam format ISO-3166 huruf besar), atau salah satu string berikut:
Geomap tidak mengaktifkan perilaku scroll atau tarik, dan hanya perilaku zooming terbatas. Zoom keluar dasar dapat diaktifkan dengan menyetel properti |
dataMode |
string | 'region' [wilayah] | Cara menampilkan nilai pada peta. Dua nilai didukung:
|
width |
string | '556px' | Lebar visualisasi. Jika tidak ada unit yang diberikan, unit defaultnya adalah piksel. |
height |
string | '347 piksel' | Tinggi visualisasi. Jika tidak ada unit yang diberikan, unit defaultnya adalah piksel. |
colors |
Array angka RGB dalam format 0xRRGGBB | [0xE0FFD4, 0xA5EF63, 0x50AA00, 0x267114] | Gradien warna untuk ditetapkan ke nilai dalam visualisasi. Anda harus memiliki minimal dua nilai; gradien akan mencakup semua nilai Anda, ditambah nilai perantara yang dihitung, dengan warna paling terang sebagai nilai terkecil, dan warna paling gelap sebagai yang tertinggi. |
showLegend |
boolean | benar | Jika true, tampilkan legenda untuk peta. |
showZoomOut |
boolean | salah | Jika true, tampilkan tombol dengan label
yang ditentukan oleh properti zoomOutLabel. Perhatikan bahwa tombol ini tidak melakukan apa pun saat diklik, kecuali menampilkan peristiwa zoomOut.
Untuk menangani zoom, rekam peristiwa ini dan ubah opsi region.
Anda hanya dapat menentukan showZoomOut jika opsi region lebih kecil daripada tampilan dunia. Salah satu cara untuk mengaktifkan perilaku zoom adalah dengan memproses peristiwa regionClick, mengubah properti region ke region yang sesuai, lalu memuat ulang peta. |
zoomOutLabel |
string | 'Perkecil' | Label untuk tombol zoom. |
Metode
| Metode | Jenis Nilai yang Ditampilkan | Deskripsi |
|---|---|---|
draw(data, options) |
Tidak ada | Menggambar peta. Dapat kembali sebelum menggambar selesai (lihat peristiwa drawingDone()). |
getSelection() |
Array elemen pilihan | Implementasi getSelection() standar. Elemen yang dipilih adalah baris. Metode ini hanya berfungsi jika opsi dataMode adalah 'region'. Anda hanya dapat memilih wilayah dengan nilai yang ditetapkan. |
setSelection(selection) |
Tidak ada | Implementasi setSelection() standar. Memperlakukan pilihan
sebagai pilihan baris, dan mendukung beberapa pilihan baris. Hanya region
dengan nilai yang ditetapkan yang dapat dipilih. |
Acara
| Name | Deskripsi | Properti |
|---|---|---|
error |
Dipicu jika terjadi error saat mencoba merender diagram. | id, pesan |
select |
Diaktifkan saat pengguna mengklik wilayah dengan nilai yang ditetapkan. Untuk mempelajari
apa yang telah dipilih, panggil Catatan: Karena batasan tertentu, peristiwa |
Tidak ada |
regionClick |
Dipanggil saat region diklik. Berfungsi baik untuk Catatan: Karena batasan tertentu, peristiwa |
Objek dengan satu properti, region, yang merupakan string dalam format ISO-3166 yang menjelaskan region yang diklik. |
zoomOut |
Dipanggil saat tombol zoom out diklik. Untuk menangani zoom, tangkap peristiwa ini dan ubah opsi Catatan: Karena batasan tertentu, peristiwa |
Tidak ada |
drawingDone |
Dipanggil saat geomap selesai menggambar. | Tidak ada |
Kebijakan Data
Lokasi di-geocoding oleh Google Maps. Data apa pun yang tidak memerlukan geocoding tidak akan dikirim ke server mana pun. Lihat Persyaratan Layanan Google Maps untuk mengetahui informasi selengkapnya tentang kebijakan data mereka.
Catatan
Karena setelan keamanan Flash, setelan ini (dan semua visualisasi berbasis Flash) mungkin tidak berfungsi dengan benar saat diakses dari lokasi file pada browser (misalnya, file:///c:/webhost/myhost/myviz.html), bukan dari URL server web (misalnya, http://www.myhost.com/myviz.html). Ini biasanya hanya merupakan masalah pengujian. Anda dapat mengatasi masalah ini seperti yang dijelaskan di situs Macromedia.