Tổng quan
Bản đồ địa lý là một bản đồ của một quốc gia, châu lục hoặc bản đồ khu vực, có màu sắc và giá trị được chỉ định cho các khu vực cụ thể. Các giá trị được thể hiện dưới dạng thang màu và bạn có thể chỉ định văn bản di chuột tuỳ chọn cho các khu vực. Bản đồ sẽ được kết xuất trong trình duyệt bằng cách sử dụng trình phát Flash được nhúng. Lưu ý rằng bản đồ không thể cuộn hoặc kéo, nhưng có thể được định cấu hình để cho phép thu phóng.
Ví dụ
Chúng tôi có hai ví dụ ở đây: một ví dụ về kiểu hiển thị của khu vực và ví dụ khác sử dụng kiểu hiển thị điểm đánh dấu.
Ví dụ về khu vực
Kiểu khu vực lấp đầy toàn bộ các khu vực (thường là các quốc gia) bằng màu sắc tương ứng với các giá trị mà bạn chỉ định. Chỉ định kiểu khu vực bằng cách gán options['dataMode']
= 'regions' trong mã của bạn.
<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>
Ví dụ về điểm đánh dấu
Kiểu "điểm đánh dấu" hiển thị một vòng tròn có kích thước và màu sắc để thể hiện giá trị trên các khu vực mà bạn chỉ định.
<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>
Đang tải
Tên gói google.charts.load là "geomap"
google.charts.load('current', {'packages': ['geomap']});
Tên lớp của hình ảnh bản đồ địa lý là google.visualization.GeoMap
var visualization = new google.visualization.GeoMap(container);
Định dạng dữ liệu
Google hỗ trợ hai định dạng địa chỉ, mỗi định dạng hỗ trợ một số lượng cột khác nhau và loại dữ liệu khác nhau cho từng cột. Tất cả địa chỉ trong bảng phải sử dụng một trong hai loại; bạn không thể kết hợp các loại.
- Định dạng 1: Vị trí Vĩ độ/Kinh độ. Định dạng này chỉ hoạt động khi tuỳ chọn
dataModelà "điểm đánh dấu". Nếu định dạng này được sử dụng, bạn không cần phải bao gồm JavaScript Google Map. Bạn có thể nhập vị trí này vào 2 cột, cùng với 2 cột không bắt buộc:- [Số, Bắt buộc] Vĩ độ. Số dương là số bắc, số âm ở phía nam.
- [Số, Bắt buộc] Kinh độ. Số dương là hướng đông, số âm là hướng tây.
- [Số, không bắt buộc] Một giá trị số được hiển thị khi người dùng di chuột qua vùng này. Nếu sử dụng cột 4, bạn bắt buộc phải sử dụng cột này.
- [Chuỗi, Không bắt buộc] Văn bản chuỗi bổ sung được hiển thị khi người dùng di chuột qua vùng này.
- Định dạng 2: Địa chỉ, tên quốc gia, vị trí tên khu vực hoặc mã vùng
đô thị của Hoa Kỳ. Định dạng này dùng được với tùy chọn
dataModeđược đặt thành "điểm đánh dấu" hoặc "khu vực". Bạn có thể nhập vị trí này vào 1 cột, và hai cột không bắt buộc:- [Chuỗi, bắt buộc] Vị trí trên bản đồ. Chúng tôi chấp nhận những định dạng sau:
- Một địa chỉ cụ thể (ví dụ: "1600 Pennsylvania Ave").
- Tên quốc gia dưới dạng chuỗi (ví dụ: "Anh") hoặc mã ISO-3166 viết hoa hoặc văn bản tiếng Anh tương đương (ví dụ: "GB" hoặc "Vương quốc Anh").
- Tên mã vùng ISO-3166-2 viết hoa hoặc tương đương văn bản tiếng Anh (ví dụ: "US-NJ" hoặc "New Jersey"). Lưu ý: Bạn chỉ có thể chỉ định khu vực khi tuỳ chọn dataMode được đặt thành "khu vực".
- Một mã vùng đô thị. Đây là các mã thành phố gồm 3 chữ số được dùng để chỉ định nhiều khu vực; các mã Hoa Kỳ chỉ được hỗ trợ. Xin lưu ý rằng các mã này không phải giống với mã vùng của điện thoại.
- [Số, không bắt buộc] Một giá trị số được hiển thị khi người dùng di chuột qua vùng này. Nếu sử dụng cột 3, bạn bắt buộc phải sử dụng cột này.
- [Chuỗi, Không bắt buộc] Văn bản chuỗi bổ sung được hiển thị khi người dùng di chuột qua vùng này.
- [Chuỗi, bắt buộc] Vị trí trên bản đồ. Chúng tôi chấp nhận những định dạng sau:
Lưu ý: Một bản đồ có thể hiển thị tối đa 400 mục; nếu DataTable hoặc DataView của bạn chứa hơn 400 hàng, thì chỉ 400 hàng đầu tiên sẽ hiển thị. Các chế độ nhanh nhất là dataMode='regions' với các vị trí được chỉ định là mã ISO và dataMode='markers' với vị trí vĩ độ/kinh độ. Chế độ chậm nhất là dataMode='markers' với địa chỉ chuỗi.
Quan trọng: DataTable phải bao gồm mọi cột không bắt buộc
trước bất kỳ cột nào mà bạn muốn sử dụng. Ví dụ: nếu bạn muốn chỉ định một bảng vĩ độ/kinh độ và chỉ muốn sử dụng cột 1, 2 và 4, thì DataTable vẫn phải xác định cột 3 (mặc dù bạn không cần thêm giá trị nào vào bảng đó):
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!");
Các tuỳ chọn cấu hình
| Tên | Loại | Mặc định | Mô tả |
|---|---|---|---|
region |
chuỗi | "thế giới" | Khu vực để hiển thị trên bản đồ. (Những khu vực xung quanh cũng sẽ hiển thị.) Có thể là mã quốc gia (ở định dạng ISO-3166 viết hoa) hoặc một trong các chuỗi sau:
Geomap không cho phép hành vi cuộn hoặc kéo mà chỉ hạn chế hành vi thu phóng. Bạn có thể bật tính năng thu nhỏ cơ bản bằng cách đặt thuộc tính |
dataMode |
chuỗi | "khu vực" | Cách hiển thị các giá trị trên bản đồ. Có hai giá trị được hỗ trợ:
|
width |
chuỗi | '556 px' | Chiều rộng hình ảnh trực quan. Nếu không có đơn vị nào được đưa ra, đơn vị mặc định sẽ là pixel. |
height |
chuỗi | "347px" | Chiều cao của hình ảnh trực quan. Nếu không có đơn vị nào được đưa ra, đơn vị mặc định sẽ là pixel. |
colors |
Mảng của các số RGB ở định dạng 0xRRGGBB | [0xE0FFD4, 0xA5EF63, 0x50AA00, 0x267114] | Độ dốc màu để gán cho các giá trị trong hình ảnh trực quan. Bạn phải có ít nhất hai giá trị; độ dốc sẽ bao gồm tất cả giá trị của bạn, cộng với giá trị trung gian đã tính toán, với màu sáng nhất là giá trị nhỏ nhất và màu tối nhất là màu cao nhất. |
showLegend |
boolean | đúng | Nếu đúng, hãy hiển thị một chú giải cho bản đồ. |
showZoomOut |
boolean | sai | Nếu giá trị là true, hãy hiện một nút có nhãn do thuộc tính zoomOutLabel chỉ định. Lưu ý rằng nút này không thực hiện bất kỳ hành động nào khi được nhấp vào, ngoại trừ việc gửi sự kiện zoomOut.
Để xử lý thao tác thu phóng, hãy thu thập sự kiện này và thay đổi tùy chọn region.
Bạn chỉ có thể chỉ định showZoomOut nếu tuỳ chọn region
nhỏ hơn chế độ xem thế giới. Một cách để bật tính năng thu phóng sẽ là theo dõi sự kiện regionClick, thay đổi thuộc tính region thành khu vực thích hợp và tải lại bản đồ. |
zoomOutLabel |
chuỗi | "Thu nhỏ" | Nhãn cho nút thu phóng. |
Phương thức
| Phương thức | Loại dữ liệu trả về | Mô tả |
|---|---|---|
draw(data, options) |
Không | Vẽ bản đồ. Có thể quay lại trước khi vẽ xong (xem sự kiện drawingDone()). |
getSelection() |
Dãy các phần tử lựa chọn | Triển khai getSelection() chuẩn. Các phần tử đã chọn là hàng. Phương thức này chỉ hoạt động khi tuỳ chọn dataMode
là "khu vực". Bạn chỉ có thể chọn một khu vực có giá trị được chỉ định. |
setSelection(selection) |
Không | Triển khai setSelection() chuẩn. Coi một lựa chọn là lựa chọn hàng và hỗ trợ nhiều lựa chọn hàng. Bạn chỉ có thể chọn những khu vực có giá trị được chỉ định. |
Sự kiện
| Tên | Mô tả | Thuộc tính |
|---|---|---|
error |
Được kích hoạt khi xảy ra lỗi khi cố gắng hiển thị biểu đồ. | mã nhận dạng, tin nhắn |
select |
Được kích hoạt khi người dùng nhấp vào một khu vực có giá trị được chỉ định. Để tìm hiểu
những gì đã được chọn, hãy gọi Lưu ý: Vì có một số giới hạn nhất định, nên sự kiện |
Không |
regionClick |
Được gọi khi một khu vực được nhấp vào. Hoạt động cho cả "khu vực" và "điểm đánh dấu" Lưu ý: Vì có một số giới hạn nhất định, nên sự kiện |
Đối tượng có một thuộc tính duy nhất là region, là một chuỗi ở định dạng ISO-3166 mô tả khu vực được nhấp vào. |
zoomOut |
Được gọi khi người dùng nhấp vào nút thu nhỏ. Để xử lý thao tác thu phóng, hãy thu thập sự kiện này và thay đổi tùy chọn Lưu ý: Vì có một số giới hạn nhất định, nên sự kiện |
Không |
drawingDone |
Được gọi khi bản đồ địa lý hoàn tất thao tác vẽ. | Không |
Chính sách dữ liệu
Vị trí được Google Maps mã hóa địa lý. Mọi dữ liệu không yêu cầu mã hoá địa lý sẽ không được gửi đến bất kỳ máy chủ nào. Vui lòng xem Điều khoản dịch vụ của Google Maps để biết thêm thông tin về chính sách dữ liệu của họ.
Lưu ý
Do các chế độ cài đặt bảo mật Flash, nội dung này (và mọi hình ảnh trực quan dựa trên Flash) có thể không hoạt động chính xác khi được truy cập từ một vị trí tệp trong trình duyệt (ví dụ: file:///c:/webhost/myhost/myviz.html) thay vì từ một URL máy chủ web (ví dụ: http://www.myhost.com/myviz.html). Đây thường chỉ là vấn đề về việc kiểm thử. Bạn có thể khắc phục vấn đề này như được mô tả trên trang web của Macromedia.