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>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>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- 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