Ứ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

<%@ 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&amp;v=2&amp;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:

Mã: Chọn hết

<%@ 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&amp;v=2&amp;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:

Mã: Chọn hết

Imports System.Net
Imports 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 Sub
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

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

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

<%@ 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&amp;v=2&amp;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:

Mã: Chọn hết

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 Function
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 độ đó.

Câu lạc bộ Visual Basic

Ứng dụng với Google Map

Ứng dụng với Google Map

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

Đang trực tuyến