Ứ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

Moderator: vietluyen

Post Reply
User avatar
NoBi
Quản trị
Quản trị
Posts: 970
Joined: Tue 18/03/2008 1:22 pm
Location: Sài Gòn
Has thanked: 58 times
Been thanked: 68 times
Contact:

Ứng dụng với Google Map

Post by NoBi »

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:

Code: Select all

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server">    <title>Untitled Page</title>    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"            type="text/javascript"></script>     <script type="text/javascript">         function createPoint() {            var address = 'Ho Chi Minh city';            if (address != "")            {                        var geocoder = new GClientGeocoder();                        if (geocoder) {                    geocoder.getLatLng(                        address,                        function(point) {                            if (!point) {                                                            }                            else                             {                                alert('X = ' + point.x + ' ; Y = ' + point.y);                                loadMap(point.x, point.y)                            }                        }                    );                }                    }        }         var map;         function loadMap(lat, lon) {            map = new GMap2(document.getElementById("map_canvas"));            map.addControl(new GLargeMapControl());            map.setCenter(new GLatLng(lon, lat), 15);            addPoints(lat, lon)        }         function addPoints(lat, lon) {            var newpoints = new Array();            newpoints[0] = new Array(lat, lon);             for(var i = 0; i < newpoints.length; i++) {                var point = new GPoint(newpoints[i][0],newpoints[i][1]);                var marker = createMarker(point);                map.addOverlay(marker);            }        }                         function createMarker(point) {            var marker = new GMarker(point);            var popupHtml = 'X = ' + point.x + '<br />Y = ' + point.y;            GEvent.addListener(marker, "click", function() {                marker.openInfoWindowHtml(popupHtml);            });            return marker;        }            </script> </head><body onload="createPoint()" onunload="GUnload()">    <form id="form1" runat="server">     <div id="map_canvas" style="width: 500px; height: 300px"></div>            </form>    </body></html>
Còn nếu dùng code ASP.Net để lấy tọa độ:

Trang aspx:

Code: Select all

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server">    <title>Untitled Page</title>    <script src="http://maps.google.com/maps?file=api&v=2&key=<%=strKey%>"            type="text/javascript"></script>     <script type="text/javascript">         var map;         function loadMap(lat, lon) {            map = new GMap2(document.getElementById("map_canvas"));            map.addControl(new GLargeMapControl());            map.setCenter(new GLatLng(lon, lat), 15);            addPoints(lat, lon)        }         function addPoints(lat, lon) {            var newpoints = new Array();            newpoints[0] = new Array(lat, lon);             for(var i = 0; i < newpoints.length; i++) {                var point = new GPoint(newpoints[i][0],newpoints[i][1]);                var marker = createMarker(point);                map.addOverlay(marker);            }        }                         function createMarker(point) {            var marker = new GMarker(point);            var popupHtml = 'X = ' + point.x + '<br />Y = ' + point.y;            GEvent.addListener(marker, "click", function() {                marker.openInfoWindowHtml(popupHtml);            });            return marker;        }            </script> </head><body onload="loadMap(<%=lat%>,<%=lon%>)" onunload="GUnload()">    <form id="form1" runat="server">         <div id="map_canvas" style="width: 500px; height: 300px"></div>        <asp:TextBox ID="TextBox1" runat="server" Width="425px" Text="780 Sư Vạn Hạnh, Q.10, Hồ Chí Minh"></asp:TextBox>        <asp:Button ID="Button1" runat="server" Text="Show..." />        </form>    </body></html>
Trang aspx.vb:

Code: Select all

Imports System.NetImports System.Xml Partial Class _Default    Inherits System.Web.UI.Page    'Google Map key    Public strKey As String = "ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"     'Ho Chi Minh city    Public lat As String = "106.6624980"    Public lon As String = "10.7591800 "     Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click        Dim strAddress As String = TextBox1.Text.Replace(" ", "+")        Dim baseAddressUri As Uri = New Uri("http://maps.google.com/")        Dim uriTemplate As UriTemplate = New UriTemplate("maps/geo?q={address}&output={output}&key={key}")        Dim formattedUri As Uri = uriTemplate.BindByPosition(baseAddressUri, strAddress, "kml", strKey)         ' Call REST service and download XML        Dim webClient As WebClient = New WebClient()        Dim geoDataXml As String = webClient.DownloadString(formattedUri)        Dim doc As XmlDocument = New XmlDocument()        doc.LoadXml(geoDataXml)        Dim element As XmlNodeList = doc.GetElementsByTagName("coordinates")        Dim value As String = element(0).InnerText         Dim values As String() = value.Split(",")         lat = values(0)        lon = values(1)         Response.Write(lat & " ; " & lon)    End SubEnd 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:

Code: Select all

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click        Dim strAddress As String = TextBox1.Text.Replace(" ", "+")        Dim baseAddressUri As Uri = New Uri("http://maps.google.com/")        Dim uriTemplate As UriTemplate = New UriTemplate("maps/geo?q={address}&output={output}&key={key}")        Dim formattedUri As Uri = uriTemplate.BindByPosition(baseAddressUri, strAddress, "csv", strKey)         Dim webClient As WebClient = New WebClient()        Dim geoData As String = webClient.DownloadString(formattedUri)        Dim values As String() = geoData.Split(",")         lat = values(3)        lon = values(2)         Response.Write(lat & " ; " & lon)    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
Attachments
GoogleMap.rar
(2.88 KiB) Downloaded 1191 times
GM.jpg
:>
User avatar
NoBi
Quản trị
Quản trị
Posts: 970
Joined: Tue 18/03/2008 1:22 pm
Location: Sài Gòn
Has thanked: 58 times
Been thanked: 68 times
Contact:

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

Post by NoBi »

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

Trang aspx:

Code: Select all

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server">    <title>Untitled Page</title>    <script src="http://maps.google.com/maps?file=api&v=2&key=<%=strKey%>"            type="text/javascript"></script>     <script type="text/javascript">         var map;                function loadMap(lon, lat) {            map = new GMap2(document.getElementById("map_canvas"));            map.addControl(new GLargeMapControl());            map.setCenter(new GLatLng(lon, lat), 15);                        addPoints()            // Ve them duong thang noi 2 diem            var polyline = new GPolyline([              new GLatLng(<%=point0%>),              new GLatLng(<%=point1%>)            ], '#ff0000', 5);            map.addOverlay(polyline);        }                function addPoints() {            var newpoints = new Array();            newpoints[0] = new Array(<%=point0%>);            newpoints[1] = new Array(<%=point1%>);             for(var i = 0; i < newpoints.length; i++) {                var point = new GPoint(newpoints[i][1],newpoints[i][0]);                var marker = createMarker(point);                map.addOverlay(marker);            }                                }                         function createMarker(point) {            var marker = new GMarker(point);            var popupHtml = 'X = ' + point.x + '<br />Y = ' + point.y;            GEvent.addListener(marker, "click", function() {                marker.openInfoWindowHtml(popupHtml);            });            return marker;        }            </script> </head><body onload="loadMap(<%=point0%>)" onunload="GUnload()">    <form id="form1" runat="server">         <div id="map_canvas" style="width: 500px; height: 300px"></div>        <asp:TextBox ID="TextBox1" runat="server" Width="425px" Text="780 Sư Vạn Hạnh, Q.10, Hồ Chí Minh"></asp:TextBox>        <br />        <asp:TextBox ID="TextBox2" runat="server" Text="10 Cao Thang, Q.3, Hồ Chí Minh"            Width="425px"></asp:TextBox>        <asp:Button ID="Button1" runat="server" Text="Tinh khoang cach" />        </form>    </body></html>
Trang aspx.vb:

Code: Select all

Imports System.Net Partial Class _Default    Inherits System.Web.UI.Page    'Google Map key    Public strKey As String = "ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"     'Ho Chi Minh city    Public point0 As String = "'10.7591800','106.6624980'"    Public point1 As String = "'10.7591800','106.6624980'"     Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click        Dim lat1, lon1, lat2, lon2 As Double         'Lay toa do diem 1        Dim strAddress As String = TextBox1.Text.Replace(" ", "+")        point0 = getPoint(strAddress, lat1, lon1)        'Lay toa do diem 2        strAddress = TextBox2.Text.Replace(" ", "+")        point1 = getPoint(strAddress, lat2, lon2)         Response.Write("Khoang cach = " & distance(lat1, lon1, lat2, lon2) & " Km")    End Sub     Private Function getPoint(ByVal address As String, ByRef lat As Double, ByRef lon As Double) As String        Dim baseAddressUri As Uri = New Uri("http://maps.google.com/")        Dim uriTemplate As UriTemplate = New UriTemplate("maps/geo?q={address}&output={output}&key={key}")        Dim formattedUri As Uri = uriTemplate.BindByPosition(baseAddressUri, address, "csv", strKey)         Dim webClient As WebClient = New WebClient()        Dim geoData As String = webClient.DownloadString(formattedUri)        Dim values As String() = geoData.Split(",")         lat = values(3)        lon = values(2)        Return "'" & lon & "','" & lat & "'"    End Function     ''' <summary>    ''' Get Distance    ''' </summary>    ''' <param name="unit">K: Kilomet; M: Mile</param>    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        Dim theta As Double = lon1 - lon2        Dim dist As Double = Math.Sin(deg2rad(lat1)) * Math.Sin(deg2rad(lat2)) + Math.Cos(deg2rad(lat1)) * Math.Cos(deg2rad(lat2)) * Math.Cos(deg2rad(theta))        dist = Math.Acos(dist)        dist = rad2deg(dist)        dist = dist * 60 * 1.1515        If unit = "K"c Then            dist = dist * 1.609344        ElseIf unit = "M"c Then            dist = dist * 0.8684        End If        Return (dist)    End Function     ''' <summary> Converts radians to decimal degrees</summary>     Private Function rad2deg(ByVal rad As Double) As Double        Return (rad / Math.PI * 180.0R)    End Function     ''' <summary> Converts decimal degrees to radians</summary>     Private Function deg2rad(ByVal deg As Double) As Double        Return (deg * Math.PI / 180.0R)    End FunctionEnd 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 độ đó.
Attachments
GoogleMap2.rar
(3.33 KiB) Downloaded 881 times
GM.jpg
:>
Post Reply

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