• Vui lòng đọc nội qui diễn đàn để tránh bị xóa bài viết
  • Tìm kiếm trước khi đặt câu hỏi

Ứng dụng với Google Map

Các bài viết giới thiệu và hướng dẫn dành cho lập trình Web Forms

Điều hành viên: vietluyen

Hình đại diện của người dùng
NoBi
Quản trị
Quản trị
Bài viết: 946
Ngày tham gia: T.Ba 18/03/2008 1:22 pm
Đến từ: Sài Gòn
Has thanked: 50 time
Been thanked: 66 time
Liên hệ:

Ứng dụng với Google Map

Gửi bàigửi bởi NoBi » T.Năm 09/04/2009 3:38 pm

Tên bài viết: Ứng dụng với Google Map
Tác giả: NoBi
Cấp độ bài viết: Trung Bình
Tóm tắt: Tạo ứng dụng bản đồ, địa điểm với Google Map


Nói tới Google Map, chắc chúng ta không còn xa lạ gì. GM cung cấp cho chúng ta rất nhiều API để sử dụng và tạo 1 bản đồ cho chính mình. Bạn có thể vào đây: http://code.google.com/apis/maps/docume ... index.html để tìm hiểu thêm. Bên dưới tôi sẽ không giải thích lại ý nghĩa các đoạn script, để tập trung đi vào nội dung chính của bài viết.

Để lấy tọa độ của 1 địa chỉ, ta có thể dùng đoạn script sau:

Mã: Chọn hết

  1. <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml" >
  6. <head runat="server">
  7.     <title>Untitled Page</title>
  8.     <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
  9.             type="text/javascript"></script>
  10.  
  11.     <script type="text/javascript">
  12.  
  13.         function createPoint() {
  14.             var address = 'Ho Chi Minh city';
  15.             if (address != "")
  16.             {        
  17.                 var geocoder = new GClientGeocoder();       
  18.                 if (geocoder) {
  19.                     geocoder.getLatLng(
  20.                         address,
  21.                         function(point) {
  22.                             if (!point) {
  23.                                
  24.                             }
  25.                             else
  26.                             {
  27.                                 alert('X = ' + point.x + ' ; Y = ' + point.y);
  28.                                 loadMap(point.x, point.y)
  29.                             }
  30.                         }
  31.                     );
  32.                 }        
  33.             }
  34.         }
  35.  
  36.         var map;
  37.  
  38.         function loadMap(lat, lon) {
  39.             map = new GMap2(document.getElementById("map_canvas"));
  40.             map.addControl(new GLargeMapControl());
  41.             map.setCenter(new GLatLng(lon, lat), 15);
  42.             addPoints(lat, lon)
  43.         }
  44.  
  45.         function addPoints(lat, lon) {
  46.             var newpoints = new Array();
  47.             newpoints[0] = new Array(lat, lon);
  48.  
  49.             for(var i = 0; i < newpoints.length; i++) {
  50.                 var point = new GPoint(newpoints[i][0],newpoints[i][1]);
  51.                 var marker = createMarker(point);
  52.                 map.addOverlay(marker);
  53.             }
  54.         }
  55.                
  56.          function createMarker(point) {
  57.             var marker = new GMarker(point);
  58.             var popupHtml = 'X = ' + point.x + '<br />Y = ' + point.y;
  59.             GEvent.addListener(marker, "click", function() {
  60.                 marker.openInfoWindowHtml(popupHtml);
  61.             });
  62.             return marker;
  63.         }
  64.        
  65.     </script>
  66.  
  67. </head>
  68. <body onload="createPoint()" onunload="GUnload()">
  69.     <form id="form1" runat="server">
  70.  
  71.     <div id="map_canvas" style="width: 500px; height: 300px"></div>
  72.        
  73.     </form>
  74.    
  75. </body>
  76. </html>


Còn nếu dùng code ASP.Net để lấy tọa độ:

Trang aspx:

Mã: Chọn hết

  1. <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml" >
  6. <head runat="server">
  7.     <title>Untitled Page</title>
  8.     <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=<%=strKey%>"
  9.             type="text/javascript"></script>
  10.  
  11.     <script type="text/javascript">
  12.  
  13.         var map;
  14.  
  15.         function loadMap(lat, lon) {
  16.             map = new GMap2(document.getElementById("map_canvas"));
  17.             map.addControl(new GLargeMapControl());
  18.             map.setCenter(new GLatLng(lon, lat), 15);
  19.             addPoints(lat, lon)
  20.         }
  21.  
  22.         function addPoints(lat, lon) {
  23.             var newpoints = new Array();
  24.             newpoints[0] = new Array(lat, lon);
  25.  
  26.             for(var i = 0; i < newpoints.length; i++) {
  27.                 var point = new GPoint(newpoints[i][0],newpoints[i][1]);
  28.                 var marker = createMarker(point);
  29.                 map.addOverlay(marker);
  30.             }
  31.         }
  32.                
  33.          function createMarker(point) {
  34.             var marker = new GMarker(point);
  35.             var popupHtml = 'X = ' + point.x + '<br />Y = ' + point.y;
  36.             GEvent.addListener(marker, "click", function() {
  37.                 marker.openInfoWindowHtml(popupHtml);
  38.             });
  39.             return marker;
  40.         }
  41.        
  42.     </script>
  43.  
  44. </head>
  45. <body onload="loadMap(<%=lat%>,<%=lon%>)" onunload="GUnload()">
  46.     <form id="form1" runat="server">
  47.  
  48.         <div id="map_canvas" style="width: 500px; height: 300px"></div>
  49.         <asp:TextBox ID="TextBox1" runat="server" Width="425px" Text="780 Sư Vạn Hạnh, Q.10, Hồ Chí Minh"></asp:TextBox>
  50.         <asp:Button ID="Button1" runat="server" Text="Show..." />
  51.    
  52.     </form>
  53.    
  54. </body>
  55. </html>


Trang aspx.vb:

Mã: Chọn hết

  1. Imports System.Net
  2. Imports System.Xml
  3.  
  4. Partial Class _Default
  5.     Inherits System.Web.UI.Page
  6.     'Google Map key
  7.     Public strKey As String = "ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
  8.  
  9.     'Ho Chi Minh city
  10.     Public lat As String = "106.6624980"
  11.     Public lon As String = "10.7591800 "
  12.  
  13.     Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
  14.         Dim strAddress As String = TextBox1.Text.Replace(" ", "+")
  15.         Dim baseAddressUri As Uri = New Uri("http://maps.google.com/")
  16.         Dim uriTemplate As UriTemplate = New UriTemplate("maps/geo?q={address}&output={output}&key={key}")
  17.         Dim formattedUri As Uri = uriTemplate.BindByPosition(baseAddressUri, strAddress, "kml", strKey)
  18.  
  19.         ' Call REST service and download XML
  20.         Dim webClient As WebClient = New WebClient()
  21.         Dim geoDataXml As String = webClient.DownloadString(formattedUri)
  22.         Dim doc As XmlDocument = New XmlDocument()
  23.         doc.LoadXml(geoDataXml)
  24.         Dim element As XmlNodeList = doc.GetElementsByTagName("coordinates")
  25.         Dim value As String = element(0).InnerText
  26.  
  27.         Dim values As String() = value.Split(",")
  28.  
  29.         lat = values(0)
  30.         lon = values(1)
  31.  
  32.         Response.Write(lat & " ; " & lon)
  33.     End Sub
  34. End Class


Ở đây GM cung cấp cho chúng ta 1 số qui định giá trị trả về:
  • json (default) — The response is formatted as a JSON object. This format is preferred as it is generally more compact.
  • kml — The response is returned as KML with a kml MIME type.
  • xml — The response is returned as KML with an xml MIME type.
  • csv — The response is returned as a comma-seperated value, described below.


Tùy theo yêu cầu của mình mà chúng ta cho tham số output = giá trị thích hợp. Ví dụ với output = csv:

Mã: Chọn hết

  1. Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
  2.         Dim strAddress As String = TextBox1.Text.Replace(" ", "+")
  3.         Dim baseAddressUri As Uri = New Uri("http://maps.google.com/")
  4.         Dim uriTemplate As UriTemplate = New UriTemplate("maps/geo?q={address}&output={output}&key={key}")
  5.         Dim formattedUri As Uri = uriTemplate.BindByPosition(baseAddressUri, strAddress, "csv", strKey)
  6.  
  7.         Dim webClient As WebClient = New WebClient()
  8.         Dim geoData As String = webClient.DownloadString(formattedUri)
  9.         Dim values As String() = geoData.Split(",")
  10.  
  11.         lat = values(3)
  12.         lon = values(2)
  13.  
  14.         Response.Write(lat & " ; " & lon)
  15.     End Sub

Và ý nghĩa những giá trị trả về theo mỗi tham số được ghi chú chi tiết tại: http://code.google.com/apis/maps/docume ... index.html
Tập tin đính kèm
GoogleMap.rar
(2.88 KiB) Đã tải 1088 lần
GM.jpg


:>

Hình đại diện của người dùng
NoBi
Quản trị
Quản trị
Bài viết: 946
Ngày tham gia: T.Ba 18/03/2008 1:22 pm
Đến từ: Sài Gòn
Has thanked: 50 time
Been thanked: 66 time
Liên hệ:

Re: Ứng dụng với Google Map

Gửi bàigửi bởi NoBi » T.Năm 09/04/2009 5:10 pm

Bây giờ chúng ta thử tính khoảng cách giữa 2 địa chỉ xem:

Trang aspx:

Mã: Chọn hết

  1. <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml" >
  6. <head runat="server">
  7.     <title>Untitled Page</title>
  8.     <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=<%=strKey%>"
  9.             type="text/javascript"></script>
  10.  
  11.     <script type="text/javascript">
  12.  
  13.         var map;
  14.        
  15.         function loadMap(lon, lat) {
  16.             map = new GMap2(document.getElementById("map_canvas"));
  17.             map.addControl(new GLargeMapControl());
  18.             map.setCenter(new GLatLng(lon, lat), 15);
  19.            
  20.             addPoints()
  21.             // Ve them duong thang noi 2 diem
  22.             var polyline = new GPolyline([
  23.               new GLatLng(<%=point0%>),
  24.               new GLatLng(<%=point1%>)
  25.             ], '#ff0000', 5);
  26.             map.addOverlay(polyline);
  27.         }
  28.        
  29.         function addPoints() {
  30.             var newpoints = new Array();
  31.             newpoints[0] = new Array(<%=point0%>);
  32.             newpoints[1] = new Array(<%=point1%>);
  33.  
  34.             for(var i = 0; i < newpoints.length; i++) {
  35.                 var point = new GPoint(newpoints[i][1],newpoints[i][0]);
  36.                 var marker = createMarker(point);
  37.                 map.addOverlay(marker);
  38.             }
  39.            
  40.            
  41.         }
  42.                
  43.          function createMarker(point) {
  44.             var marker = new GMarker(point);
  45.             var popupHtml = 'X = ' + point.x + '<br />Y = ' + point.y;
  46.             GEvent.addListener(marker, "click", function() {
  47.                 marker.openInfoWindowHtml(popupHtml);
  48.             });
  49.             return marker;
  50.         }
  51.        
  52.     </script>
  53.  
  54. </head>
  55. <body onload="loadMap(<%=point0%>)" onunload="GUnload()">
  56.     <form id="form1" runat="server">
  57.  
  58.         <div id="map_canvas" style="width: 500px; height: 300px"></div>
  59.         <asp:TextBox ID="TextBox1" runat="server" Width="425px" Text="780 Sư Vạn Hạnh, Q.10, Hồ Chí Minh"></asp:TextBox>
  60.         <br />
  61.         <asp:TextBox ID="TextBox2" runat="server" Text="10 Cao Thang, Q.3, Hồ Chí Minh"
  62.             Width="425px"></asp:TextBox>
  63.         <asp:Button ID="Button1" runat="server" Text="Tinh khoang cach" />
  64.    
  65.     </form>
  66.    
  67. </body>
  68. </html>


Trang aspx.vb:

Mã: Chọn hết

  1. Imports System.Net
  2.  
  3. Partial Class _Default
  4.     Inherits System.Web.UI.Page
  5.     'Google Map key
  6.     Public strKey As String = "ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
  7.  
  8.     'Ho Chi Minh city
  9.     Public point0 As String = "'10.7591800','106.6624980'"
  10.     Public point1 As String = "'10.7591800','106.6624980'"
  11.  
  12.     Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
  13.         Dim lat1, lon1, lat2, lon2 As Double
  14.  
  15.         'Lay toa do diem 1
  16.         Dim strAddress As String = TextBox1.Text.Replace(" ", "+")
  17.         point0 = getPoint(strAddress, lat1, lon1)
  18.         'Lay toa do diem 2
  19.         strAddress = TextBox2.Text.Replace(" ", "+")
  20.         point1 = getPoint(strAddress, lat2, lon2)
  21.  
  22.         Response.Write("Khoang cach = " & distance(lat1, lon1, lat2, lon2) & " Km")
  23.     End Sub
  24.  
  25.     Private Function getPoint(ByVal address As String, ByRef lat As Double, ByRef lon As Double) As String
  26.         Dim baseAddressUri As Uri = New Uri("http://maps.google.com/")
  27.         Dim uriTemplate As UriTemplate = New UriTemplate("maps/geo?q={address}&output={output}&key={key}")
  28.         Dim formattedUri As Uri = uriTemplate.BindByPosition(baseAddressUri, address, "csv", strKey)
  29.  
  30.         Dim webClient As WebClient = New WebClient()
  31.         Dim geoData As String = webClient.DownloadString(formattedUri)
  32.         Dim values As String() = geoData.Split(",")
  33.  
  34.         lat = values(3)
  35.         lon = values(2)
  36.         Return "'" & lon & "','" & lat & "'"
  37.     End Function
  38.  
  39.     ''' <summary>
  40.     ''' Get Distance
  41.     ''' </summary>
  42.     ''' <param name="unit">K: Kilomet; M: Mile</param>
  43.     Private Function distance(ByVal lat1 As Double, ByVal lon1 As Double, ByVal lat2 As Double, ByVal lon2 As Double, Optional ByVal unit As Char = "K"c) As Double
  44.         Dim theta As Double = lon1 - lon2
  45.         Dim dist As Double = Math.Sin(deg2rad(lat1)) * Math.Sin(deg2rad(lat2)) + Math.Cos(deg2rad(lat1)) * Math.Cos(deg2rad(lat2)) * Math.Cos(deg2rad(theta))
  46.         dist = Math.Acos(dist)
  47.         dist = rad2deg(dist)
  48.         dist = dist * 60 * 1.1515
  49.         If unit = "K"c Then
  50.             dist = dist * 1.609344
  51.         ElseIf unit = "M"c Then
  52.             dist = dist * 0.8684
  53.         End If
  54.         Return (dist)
  55.     End Function
  56.  
  57.     ''' <summary> Converts radians to decimal degrees</summary>
  58.     Private Function rad2deg(ByVal rad As Double) As Double
  59.         Return (rad / Math.PI * 180.0R)
  60.     End Function
  61.  
  62.     ''' <summary> Converts decimal degrees to radians</summary>
  63.     Private Function deg2rad(ByVal deg As Double) As Double
  64.         Return (deg * Math.PI / 180.0R)
  65.     End Function
  66. End Class


Rất đơn giản là tìm tọa độ của từng địa chỉ, rồi tính khoảng cách dựa vào các tọa độ đó.
Tập tin đính kèm
GoogleMap2.rar
(3.33 KiB) Đã tải 770 lần
GM.jpg
:>


Quay về “[ASP.NET] Bài viết giới thiệu, hướng dẫn”

Đang trực tuyến

Đang xem chuyên mục này: Không có thành viên nào trực tuyến.1 khách