Đ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.
II. Bối cảnh
Trước đây, tôi đã viết một bài viết về cách đếm người dùng truy cập website (http://www.codeproject.com/KB/database/Ghaffar.aspx) và lưu dữ liệu trong một bảng có địa chỉ IP khách truy cập. Sau đó một ngày, tôi truy cập một trang web được cung cấp để hiển thị dữ liệu địa chỉ IP khách truy cập tương tự trên bản đồ của Google. Tôi thấy rằng Google Maps API cung cấp rất nhiều chức năng bao gồm việc đặt một điểm đánh dấu trên bản đồ nếu biết trước tọa độ kinh độ và vĩ độ.
Vấn đề duy nhất là tôi đã phải dịch IP thành toạ độ tương ứng. Tôi tìm kiếm một lần nữa và thấy một số dịch vụ web trên Internet mà có thể dịch ngược các tọa độ trái đất (kinh độ, vĩ độ) của một IP bất kỳ. Đó là tất cả những điều cần thiết để đạt được mục tiêu và bây giờ nó đã được chỉ là vấn đề thực hiện như thế nào.III. 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.
<%--Google API reference--%>
Bây giờ làm thế nào để tạo đoạn mã trên máy chủ có thể hiển thị tất cả các điểm dữ liệu trên bản đồ? Dưới đây là một phương pháp để làm điều đó. Chúng ta cần phải vượt qua nó trong bảng dữ liệu ở trên có Longitude (kinh độ) và Latitude (Vĩ độ), với các điểm muốn đánh dấu trên MAP và phương pháp này sẽ tạo ra những kịch bản hoàn chỉnh với tất cả các điểm đánh dấu bản đồ trong Control Literal.private void BuildScript(DataTable tbl)
{
String Locations = "";
foreach (DataRow r in tbl.Rows)
{
// bypass empty rows
if (r["Latitude"].ToString().Trim().Length == 0)
continue;
string Latitude = r["Latitude"].ToString();
string Longitude = r["Longitude"].ToString();
// create a line of JavaScript for marker on map for this record
Locations += Environment.NewLine + " map.addOverlay
(new GMarker(new GLatLng(" + Latitude + "," + Longitude + ")));";
}
// construct the final script
js.Text = @" ";
} 
Click vào đây để xem demo trực tiếp của bài viết này (http://www.ghaffar.somee.com/scr.aspx)
Bài viết gốc: http://www.codeproject.com/KB/web-image/Google_map.aspx
Muốn tìm hiểu thêm về Google Maps API vào đây:http://code.google.com/apis/maps/documentation/index.html
Đây cũng là 1 cách để bạn hiển thị người dùng trên bản đồ theo địa chỉ IP với mức độ chính xác tuyệt đối ở các nước thế giới thứ 1. Mấy tài lái TAXI ở Việt Nam bị tổng đài kiểm soát thông qua cách này khi mà họ bị gắn 1 con chip trong xe và dựa vào 3 cột sóng lân cận để phát hiện chính xác điểm ở đâu.
Bạn thực hiện theo các bước dưới đây:
Bước 1: Dowload thư viện GMaps.dll tại Google Maps para ASP.NET, giải nén và Add GMaps.dll vào thư mục Bin trong ứng dụng của bạn
Bước 2: Add GMaps.dll vào Toolbox trong VS của bạn (thực hiện bước này để bạn kéo thả khi lập trình cho dễ)
Chọn Tool Box -> Phải chuột vào General Tab -> chọn Add New Tab đặt tên Tab là GoogleMap -> Phải chuột vào GoogleMap chọn Browse.. chọn đến nơi lưu GMaps.dll -> OK.
Bước 3: Thiết kế Form
Bước này minh họa thiết kế 1 Form đơn giản để người dùng nhập các thông tin cần search
Chú ý bạn cần đăng ký dùng assembly của Gmaps.dll bạn cần đăng ký dòng code sau trong trang aspx (Nếu bạn kéo thả từ Toolbox như hướng dẫn bước 2 thì dòng code này sẽ tự sinh cho bạn)
<%@ Register assembly="GMaps" namespace="Subgurim.Controles" tagprefix="cc1" %>
Với cc1:GMap bạn có thể thêm các thuộc tính như enableContinuousZoom="true" cho phép zoom kết quả search, enableGoogleBar="true" - hiển thị GoogleBar, ...
Bước 4: Viết code. Khi người dùng nhập các thông tin rồi nhấn ShowMap khi đó Google Maps sẽ hiển thị thông tin, vị trí, đường đi của địa chỉ người dùng nhập (nếu có)
using System;
using System.Configuration;
using Subgurim.Controles;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnShowMap_Click(object sender, EventArgs e)
{
string fulladdress = string.Format("{0}.{1}.{2}", txtStreet.Text, txtCity.Text, txtCountry.Text);
string skey = ConfigurationManager.AppSettings["googlemaps.subgurim.net"];
GeoCode geocode;
geocode = GMap1.getGeoCodeRequest(fulladdress);
var glatlng = new Subgurim.Controles.GLatLng(geocode.Placemark.coord inates.lat, geocode.Placemark.coordinates.lng);
GMap1.setCenter(glatlng, 16, Subgurim.Controles.GMapType.GTypes.Normal);
var oMarker = new Subgurim.Controles.GMarker(glatlng);
GMap1.addGMarker(oMarker);
}
}
Bước 5: Sửa web.config
Ở bước 4 khi viết code bạn dùng string skey = ConfigurationManager.AppSettings["googlemaps.subgurim.net"]; do đó bạn cần sửa trong web.config bằng cách thêm key="googlemaps.Subgurim.net" bên trong thẻ appSettings như sau.
Nếu ở bước 4 bạn gán luôn string skey=YourGoogleMapsAPIKeyHere thì bạn không cần thực hiện bước 5.
Chú ý nếu bạn dùng code như đã hướng dẫn ở trên thì khi bạn thực hiện trên localhost sẽ chạy bình thường nhưng nếu bạn đưa lên host sẽ báo lỗi "This web site needs a different Google Maps API key. A new key can be generated at http://code.google.com/apis/maps/signup.html".Vậy giá trị YourGoogleMapsAPIKeyHere được lấy từ đâu? bạn vào Sign Up for the Google Maps API - Google Maps API Family - Google Code đăng nhập với tài khoản gmail và điền url website của bạn và nhấn Gennerate API Key để lấy Key và thay vào web.config ở bước 5
Bước 1: Dowload thư viện GMaps.dll tại Google Maps para ASP.NET, giải nén và Add GMaps.dll vào thư mục Bin trong ứng dụng của bạn
Bước 2: Add GMaps.dll vào Toolbox trong VS của bạn (thực hiện bước này để bạn kéo thả khi lập trình cho dễ)
Chọn Tool Box -> Phải chuột vào General Tab -> chọn Add New Tab đặt tên Tab là GoogleMap -> Phải chuột vào GoogleMap chọn Browse.. chọn đến nơi lưu GMaps.dll -> OK.
Bước 3: Thiết kế Form
Bước này minh họa thiết kế 1 Form đơn giản để người dùng nhập các thông tin cần search
Street | |
City | |
Country | |
Text="ShowMap" /> | |
Chú ý bạn cần đăng ký dùng assembly của Gmaps.dll bạn cần đăng ký dòng code sau trong trang aspx (Nếu bạn kéo thả từ Toolbox như hướng dẫn bước 2 thì dòng code này sẽ tự sinh cho bạn)
<%@ Register assembly="GMaps" namespace="Subgurim.Controles" tagprefix="cc1" %>
Với cc1:GMap bạn có thể thêm các thuộc tính như enableContinuousZoom="true" cho phép zoom kết quả search, enableGoogleBar="true" - hiển thị GoogleBar, ...
Bước 4: Viết code. Khi người dùng nhập các thông tin rồi nhấn ShowMap khi đó Google Maps sẽ hiển thị thông tin, vị trí, đường đi của địa chỉ người dùng nhập (nếu có)
using System;
using System.Configuration;
using Subgurim.Controles;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnShowMap_Click(object sender, EventArgs e)
{
string fulladdress = string.Format("{0}.{1}.{2}", txtStreet.Text, txtCity.Text, txtCountry.Text);
string skey = ConfigurationManager.AppSettings["googlemaps.subgurim.net"];
GeoCode geocode;
geocode = GMap1.getGeoCodeRequest(fulladdress);
var glatlng = new Subgurim.Controles.GLatLng(geocode.Placemark.coord inates.lat, geocode.Placemark.coordinates.lng);
GMap1.setCenter(glatlng, 16, Subgurim.Controles.GMapType.GTypes.Normal);
var oMarker = new Subgurim.Controles.GMarker(glatlng);
GMap1.addGMarker(oMarker);
}
}
Bước 5: Sửa web.config
Ở bước 4 khi viết code bạn dùng string skey = ConfigurationManager.AppSettings["googlemaps.subgurim.net"]; do đó bạn cần sửa trong web.config bằng cách thêm key="googlemaps.Subgurim.net" bên trong thẻ appSettings như sau.
Nếu ở bước 4 bạn gán luôn string skey=YourGoogleMapsAPIKeyHere thì bạn không cần thực hiện bước 5.
Chú ý nếu bạn dùng code như đã hướng dẫn ở trên thì khi bạn thực hiện trên localhost sẽ chạy bình thường nhưng nếu bạn đưa lên host sẽ báo lỗi "This web site needs a different Google Maps API key. A new key can be generated at http://code.google.com/apis/maps/signup.html".Vậy giá trị YourGoogleMapsAPIKeyHere được lấy từ đâu? bạn vào Sign Up for the Google Maps API - Google Maps API Family - Google Code đăng nhập với tài khoản gmail và điền url website của bạn và nhấn Gennerate API Key để lấy Key và thay vào web.config ở bước 5
Đăng nhận xét