quangndn
07-03-2011, 11:27
Đa số trong chúng ta đã thấy được bản đồ trái đất và xem các đường phố thông qua ứng dụng Google Map. Trong bài này, xin giới thiệu 1 kỹ thuật đơn giản để hiển thị dữ liệu người dùng hay bất kỳ dữ liệu cần thiết trên bản đồ của Google.
Cách làm
Giả sử có một bảng trong một cơ sở dữ liệu nào đó có hai cột cho tọa độ trái đất (kinh độ, vĩ độ) mà bạn muốn hiển thị trên Google bản đồ như dưới đây:
Nếu bạn có một bảng chứa địa chỉ IP, bạn có thể thêm hai cột mới (kinh độ + vĩ độ) trong bảng đó, và sau đó sử dụng một số dịch vụ web để cập nhật các bảng cho các tọa độ bằng tay hoặc có thể viết một chương trình nhỏ để gọi như một dịch vụ web để cập nhật cơ sở dữ liệu của bạn tự động. Hoặc có thể muốn hiển thị điểm tọa độ trên bản đồ, hoặc có thể quan tâm đến với vị trí của phòng trưng bày các sản phẩm (công ty kinh doanh) của bạn trên toàn thế giới và bạn có một dữ liệu tương tự cho điều đó. Khả năng ứng dụng mở cho bài viết này là vô tận.
Bây giờ làm thế nào hiển thị dữ liệu bản đồ trên Google? Google cung cấp một số phương pháp API mà có thể gọi trong JavaScript từ trang web và cung cấp tọa độ để đặt một điểm đánh dấu trên bản đồ. Trước tiên, cần phải thêm tham khảo các API trong HTML với thẻ tiêu đề như:
Lưu ý: Cần lấy một khoá duy nhất cho trang web cần làm từ Google trước khi đưa ra nội dung trang web. Đối với mục đích thử nghiệm trên localhost, có thể sử dụng mã giống như trên.
Thứ hai, bạn phải đặt một phần tử DIV vào trang muốn hiển thị bản đồ của Google, đặt kích thước, vv theo nhu cầu bố trí website.
Thứ ba, có thể tạo một đối tượng bản đồ của Google bằng cách gửi các thẻ DIV mà muốn hiển thị trên bản đồ.
var map = new GMap2(document.getElementById('map_canvas'));
Ngoài ra cần phải cho những vị trí trên bản đồ lên được ở trung tâm của bản đồ, đầu tiên nhận được điểm có giá trị kinh độ và vĩ độ. Ví dụ, nếumuốn xem thành phố London ở trung tâm của bản đồ, có thể sử dụng phương pháp như:
GLatLng(51.5,-0.1167)
Bây giờ dùng phương thức setCenter() với độ phóng cho các phạm vi bản đồ lên 1-20. Tôi đang sử dụng cấp độ 2 để xem toàn thế giới trong bản đồ, tăng con số này sẽ phóng to bản đồ tới vị trí trung tâm cần thiết.
map.setCenter(new GLatLng(51.5,-0.1167), 2);
Sau đó, có thể chỉ định một vị trí trên bản đồ của Google để đặt một dấu tại địa điểm đó bằng cách gọi phương pháp addOverlay với GMarker như là đối số thực tế mà phải mất tọa độ của vị trí này. Ví dụ để đặt một điểm đánh dấu trên Toronto, có thể viết dòng sau trong script.
map.addOverlay(new GMarker(new GLatLng(43.6667,-79.4168)));
Bạn có thể xác định các điểm đánh dấu nhiêu tùy thích. Đặt tất cả các điểm với nhau trong một chức năng JavaScript và gọi nó là sự kiện onload của trang.
Nhưng chờ một phút .. JavaScript! Không phải là nó lập trình từ phía khách hàng? ... Sau đó làm thế nào có thể truyền dữ liệu đến Google API từ một cơ sở dữ liệu trên máy chủ? Đúng rồi, đây là vấn đề chúng ta có để giải quyết. Ở đây cần phải sử dụng một sự kết hợp của JavaScript và phía máy chủ bất cứ kịch bản, ví dụ như ASP.NET C #, VB, PHP hay CGI nào phù hợp với môi trường. Tôi sử dụng C # và JavaScript để hoàn thành.
Bạn có thể tạo ra JavaScript trên các máy chủ Google API và render nó trên máy khách bằng cách sử dụng một Control asp:Literal. Bạn cũng cần phải đặt một control Div trên trang mà trong đó các API của Google có thể khiến một bản đồ tùy chỉnh trong trình duyệt và thêm tham chiếu đến tập lệnh API của Google. Vì vậy, chỉ cần hai control trên trang đó là Literal và Div HTML sẽ được hiển thị bên dưới bao gồm các tài liệu tham khảo cho các API của Google Map.
Xem bài viết chi tiết và demo: http://ytuongdoc.com/VN/news/?a=detail&d=52&l=94
Cách làm
Giả sử có một bảng trong một cơ sở dữ liệu nào đó có hai cột cho tọa độ trái đất (kinh độ, vĩ độ) mà bạn muốn hiển thị trên Google bản đồ như dưới đây:
Nếu bạn có một bảng chứa địa chỉ IP, bạn có thể thêm hai cột mới (kinh độ + vĩ độ) trong bảng đó, và sau đó sử dụng một số dịch vụ web để cập nhật các bảng cho các tọa độ bằng tay hoặc có thể viết một chương trình nhỏ để gọi như một dịch vụ web để cập nhật cơ sở dữ liệu của bạn tự động. Hoặc có thể muốn hiển thị điểm tọa độ trên bản đồ, hoặc có thể quan tâm đến với vị trí của phòng trưng bày các sản phẩm (công ty kinh doanh) của bạn trên toàn thế giới và bạn có một dữ liệu tương tự cho điều đó. Khả năng ứng dụng mở cho bài viết này là vô tận.
Bây giờ làm thế nào hiển thị dữ liệu bản đồ trên Google? Google cung cấp một số phương pháp API mà có thể gọi trong JavaScript từ trang web và cung cấp tọa độ để đặt một điểm đánh dấu trên bản đồ. Trước tiên, cần phải thêm tham khảo các API trong HTML với thẻ tiêu đề như:
Lưu ý: Cần lấy một khoá duy nhất cho trang web cần làm từ Google trước khi đưa ra nội dung trang web. Đối với mục đích thử nghiệm trên localhost, có thể sử dụng mã giống như trên.
Thứ hai, bạn phải đặt một phần tử DIV vào trang muốn hiển thị bản đồ của Google, đặt kích thước, vv theo nhu cầu bố trí website.
Thứ ba, có thể tạo một đối tượng bản đồ của Google bằng cách gửi các thẻ DIV mà muốn hiển thị trên bản đồ.
var map = new GMap2(document.getElementById('map_canvas'));
Ngoài ra cần phải cho những vị trí trên bản đồ lên được ở trung tâm của bản đồ, đầu tiên nhận được điểm có giá trị kinh độ và vĩ độ. Ví dụ, nếumuốn xem thành phố London ở trung tâm của bản đồ, có thể sử dụng phương pháp như:
GLatLng(51.5,-0.1167)
Bây giờ dùng phương thức setCenter() với độ phóng cho các phạm vi bản đồ lên 1-20. Tôi đang sử dụng cấp độ 2 để xem toàn thế giới trong bản đồ, tăng con số này sẽ phóng to bản đồ tới vị trí trung tâm cần thiết.
map.setCenter(new GLatLng(51.5,-0.1167), 2);
Sau đó, có thể chỉ định một vị trí trên bản đồ của Google để đặt một dấu tại địa điểm đó bằng cách gọi phương pháp addOverlay với GMarker như là đối số thực tế mà phải mất tọa độ của vị trí này. Ví dụ để đặt một điểm đánh dấu trên Toronto, có thể viết dòng sau trong script.
map.addOverlay(new GMarker(new GLatLng(43.6667,-79.4168)));
Bạn có thể xác định các điểm đánh dấu nhiêu tùy thích. Đặt tất cả các điểm với nhau trong một chức năng JavaScript và gọi nó là sự kiện onload của trang.
Nhưng chờ một phút .. JavaScript! Không phải là nó lập trình từ phía khách hàng? ... Sau đó làm thế nào có thể truyền dữ liệu đến Google API từ một cơ sở dữ liệu trên máy chủ? Đúng rồi, đây là vấn đề chúng ta có để giải quyết. Ở đây cần phải sử dụng một sự kết hợp của JavaScript và phía máy chủ bất cứ kịch bản, ví dụ như ASP.NET C #, VB, PHP hay CGI nào phù hợp với môi trường. Tôi sử dụng C # và JavaScript để hoàn thành.
Bạn có thể tạo ra JavaScript trên các máy chủ Google API và render nó trên máy khách bằng cách sử dụng một Control asp:Literal. Bạn cũng cần phải đặt một control Div trên trang mà trong đó các API của Google có thể khiến một bản đồ tùy chỉnh trong trình duyệt và thêm tham chiếu đến tập lệnh API của Google. Vì vậy, chỉ cần hai control trên trang đó là Literal và Div HTML sẽ được hiển thị bên dưới bao gồm các tài liệu tham khảo cho các API của Google Map.
Xem bài viết chi tiết và demo: http://ytuongdoc.com/VN/news/?a=detail&d=52&l=94