Tổng quan
Bản đồ địa lý là bản đồ của một quốc gia, lục địa hoặc bản đồ khu vực, có màu sắc và giá trị được chỉ định cho các vùng cụ thể. Giá trị được hiển thị 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 bản đồ, nhưng có thể định cấu hình bản đồ để cho phép thu phóng.
Ví dụ
Chúng tôi có 2 ví dụ ở đây: một ví dụ sử dụng kiểu hiển thị theo khu vực và một ví dụ khác sử dụng kiểu hiển thị điểm đánh dấu.
Ví dụ về các khu vực
Kiểu khu vực sẽ tô màu toàn bộ khu vực (thường là quốc gia) bằng các màu 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à được tô màu để biểu thị một 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 hình ảnh hóa bản đồ địa lý là google.visualization.GeoMap
var visualization = new google.visualization.GeoMap(container);
Định dạng dữ liệu
Hai định dạng địa chỉ được hỗ trợ, mỗi định dạng hỗ trợ một số lượng cột khác nhau và kiểu dữ liệu khác nhau cho mỗi cột. Tất cả địa chỉ trong bảng phải sử dụng một trong hai địa chỉ này; 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 sử dụng định dạng này, bạn không cần thêm JavaScript của Google Maps. Vị trí được nhập trong 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 là số phía nam.
- [Số, Bắt buộc] Kinh độ. Số dương là số phía Đông, số âm là phía Tây.
- [Số, Không bắt buộc] Một giá trị số xuất hiện khi người dùng di chuột qua khu vực này. Nếu bạn sử dụng cột 4, thì cột này là bắt buộc.
- [Chuỗi, không bắt buộc] Văn bản chuỗi bổ sung hiển thị khi người dùng di chuột qua khu vực 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 hoạt động với lựa chọn
dataModeđược đặt thành "điểm đánh dấu" hoặc "khu vực". Vị trí được nhập trong một cột, cùng với 2 cột không bắt buộc:- [Chuỗi, Bắt buộc] Vị trí bản đồ. Chúng tôi chấp nhận các định dạng sau:
- Một địa chỉ cụ thể (ví dụ: "1600 Pennsylvania Ave").
- Tên quốc gia ở dạng chuỗi (ví dụ: "Anh") hoặc mã ISO-3166 viết hoa hoặc văn bản tương đương bằng tiếng Anh (ví dụ: "GB" hoặc "Vương quốc Anh").
- Tên mã khu vực ISO-3166-2 viết hoa hoặc văn bản tương đương bằng tiếng Anh (ví dụ: "US-NJ" hoặc "New Jersey"). Lưu ý: Bạn chỉ có thể chỉ định các khu vực khi đặt tuỳ chọn dataMode thành "Region" (Khu vực).
- Mã vùng đô thị. Đây là mã thành phố lớn gồm 3 chữ số dùng để chỉ định nhiều khu vực; mã của Hoa Kỳ chỉ được hỗ trợ. Xin lưu ý rằng các mã này không giống như mã vùng điện thoại.
- [Số, Không bắt buộc] Một giá trị số xuất hiện khi người dùng di chuột qua khu vực này. Nếu bạn sử dụng cột 3, thì cột này là bắt buộc.
- [Chuỗi, không bắt buộc] Văn bản chuỗi bổ sung hiển thị khi người dùng di chuột qua khu vực này.
- [Chuỗi, Bắt buộc] Vị trí bản đồ. Chúng tôi chấp nhận các định dạng sau:
Lưu ý: Một bản đồ có thể hiển thị tối đa 400 mục nhập;
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 được 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ĩ độ/kinh độ. Chế độ chậm nhất là dataMode='markers' với địa chỉ chuỗi.
Lưu ý quan trọng: DataTable của bạn phải bao gồm mọi cột không bắt buộc trước cột bất kỳ 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ác cột 1, 2 và 4, thì DataTable của bạn 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 cột đó):
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 lựa chọn cấu hình
| Tên | Loại | Mặc định | Nội dung mô tả |
|---|---|---|---|
region |
string | "thế giới" | Khu vực hiển thị trên bản đồ. (Các 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:
Bản đồ địa lý không cho phép hành vi cuộn hoặc kéo mà chỉ cho phép hành vi thu phóng hạn chế. 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 |
string | "region" (khu vực) | Cách hiển thị các giá trị trên bản đồ. Hai giá trị được hỗ trợ:
|
width |
string | "556px" | Chiều rộng của hình ảnh trực quan. Nếu không có đơn vị nào được cung cấp, đơn vị mặc định sẽ là pixel. |
height |
string | "347px" | Chiều cao của hình ảnh trực quan. Nếu không có đơn vị nào được cung cấp, đơn vị mặc định sẽ là pixel. |
colors |
Mảng 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ả các giá trị của bạn cùng với các giá trị trung gian được tính toán, trong đó 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, hiển thị chú thích cho bản đồ. |
showZoomOut |
boolean | false | Nếu đúng, hãy hiển thị 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 có tác dụng gì 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 nắm bắt sự kiện này và thay đổi tuỳ 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 hành vi phóng to là theo dõi sự kiện regionClick, thay đổi thuộc tính region sang khu vực thích hợp và tải lại bản đồ. |
zoomOutLabel |
string | "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ề | Nội dung mô tả |
|---|---|---|
draw(data, options) |
Không có | Vẽ bản đồ. Có thể trả về trước khi vẽ xong (xem sự kiện drawingDone()). |
getSelection() |
Mảng gồm các phần tử lựa chọn | Cách triển khai getSelection() chuẩn. Các phần tử được chọn là các hàng. Phương thức này chỉ hoạt động khi lựa 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 có | Cách triển khai setSelection() chuẩn. Coi một lựa chọn là một 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 | Nội dung 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 vùng có một giá trị được chỉ định. Để tìm hiểu những mục đã được chọn, hãy gọi Lưu ý: Do một số giới hạn nhất định, sự kiện |
Không có |
regionClick |
Được gọi khi người dùng nhấp vào một khu vực. Dùng được cho cả "khu vực" và "điểm đánh dấu" Lưu ý: Do một số giới hạn nhất định, sự kiện |
Đối tượng có một thuộc tính duy nhất là region. Đây là 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 nắm bắt sự kiện này và thay đổi tuỳ chọn Lưu ý: Do một số giới hạn nhất định, sự kiện |
Không có |
drawingDone |
Được gọi khi bản đồ địa lý đã vẽ xong. | Không có |
Chính sách về dữ liệu
Các vị trí được mã hoá địa lý bởi Google Maps. 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 Google Maps.
Lưu ý
Do chế độ cài đặt bảo mật Flash, chế độ này (và tất cả các hình ảnh dựa trên Flash) có thể không hoạt động bình thường 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ừ URL của máy chủ web (ví dụ: http://www.myhost.com/myviz.html). Đây thường chỉ là vấn đề kiểm thử. Bạn có thể khắc phục sự cố này như mô tả trên trang web Macromedia.