利用ASP.NET結合GoogleMap的Geocoding Service,提供一個簡易Address查詢功能
最近看到有人提到這方面的問題...
小弟就做了一個簡單版的demo程式...
如何使用asp.net結合google map 的Geocoding Service
提供使用者輸入address,然後快速找到地圖的位置....c#範例..
GoogleMap.aspx
01 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="GoogleMap.aspx.cs" Inherits="GoogleMap" %>
02
03 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
04 <html xmlns="http://www.w3.org/1999/xhtml">
05 <head id="Head1" runat="server">
06 <title>Google Map</title>
07
08 <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA-aWzeXZzb2erLxHs9uO0GhR7tCGSxHqBYteMGl2e75HAQnVqdRTskvZqM-9lGi-Lbkd346AVNoH6hg"
09 type="text/javascript"></script>
10
11 <script type="text/javascript">
12
13 //<![CDATA[
14
15 var geocoder;
16 var map;
17
18 //var address = "高雄市火車站";
19 var address = "<%= this.address %>";
20
21 // On page load, call this function
22
23 function load()
24 {
25 // Create new map object
26 map = new GMap2(document.getElementById("map"));
27
28 // Create new geocoding object
29 geocoder = new GClientGeocoder();
30
31 // Retrieve location information, pass it to addToMap()
32 geocoder.getLocations(address, addToMap);
33 }
34
35 // This function adds the point to the map
36
37 function addToMap(response)
38 {
39 // Retrieve the object
40 place = response.Placemark[0];
41
42 // Retrieve the latitude and longitude
43 point = new GLatLng(place.Point.coordinates[1],place.Point.coordinates[0]);
44
45 // Center the map on this point
46 map.setCenter(point, 13);
47
48 // Create a marker
49 marker = new GMarker(point);
50
51 // Add the marker to map
52 map.addOverlay(marker);
53
54 // Add address information to marker
55 marker.openInfoWindowHtml(place.address);
56 }
57
58 //]]>
59 </script>
60
61 </head>
62 <body onload="load()" onunload="GUnload()">
63 <form id="form1" runat="server">
64 <asp:TextBox ID="TextBox1" runat="server" Width="400px"></asp:TextBox>
65 <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Search" /><br />
66 <div id="map" style="width: 100%; height: 500px; border-right: black thin solid;
67 border-top: black thin solid; border-left: black thin solid; border-bottom: black thin solid;">
68 </div>
69 </form>
70 </body>
71 </html>
72
02
03 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
04 <html xmlns="http://www.w3.org/1999/xhtml">
05 <head id="Head1" runat="server">
06 <title>Google Map</title>
07
08 <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA-aWzeXZzb2erLxHs9uO0GhR7tCGSxHqBYteMGl2e75HAQnVqdRTskvZqM-9lGi-Lbkd346AVNoH6hg"
09 type="text/javascript"></script>
10
11 <script type="text/javascript">
12
13 //<![CDATA[
14
15 var geocoder;
16 var map;
17
18 //var address = "高雄市火車站";
19 var address = "<%= this.address %>";
20
21 // On page load, call this function
22
23 function load()
24 {
25 // Create new map object
26 map = new GMap2(document.getElementById("map"));
27
28 // Create new geocoding object
29 geocoder = new GClientGeocoder();
30
31 // Retrieve location information, pass it to addToMap()
32 geocoder.getLocations(address, addToMap);
33 }
34
35 // This function adds the point to the map
36
37 function addToMap(response)
38 {
39 // Retrieve the object
40 place = response.Placemark[0];
41
42 // Retrieve the latitude and longitude
43 point = new GLatLng(place.Point.coordinates[1],place.Point.coordinates[0]);
44
45 // Center the map on this point
46 map.setCenter(point, 13);
47
48 // Create a marker
49 marker = new GMarker(point);
50
51 // Add the marker to map
52 map.addOverlay(marker);
53
54 // Add address information to marker
55 marker.openInfoWindowHtml(place.address);
56 }
57
58 //]]>
59 </script>
60
61 </head>
62 <body onload="load()" onunload="GUnload()">
63 <form id="form1" runat="server">
64 <asp:TextBox ID="TextBox1" runat="server" Width="400px"></asp:TextBox>
65 <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Search" /><br />
66 <div id="map" style="width: 100%; height: 500px; border-right: black thin solid;
67 border-top: black thin solid; border-left: black thin solid; border-bottom: black thin solid;">
68 </div>
69 </form>
70 </body>
71 </html>
72
GoogleMap.aspx.cs
01 
using System;
02
using System.Data;
03using System.Configuration;
04using System.Collections;
05using System.Web;
06using System.Web.Security;
07using System.Web.UI;
08using System.Web.UI.WebControls;
09using System.Web.UI.WebControls.WebParts;
10
using System.Web.UI.HtmlControls;
11
12public partial class GoogleMap : System.Web.UI.Page
13{
14
public string address = "高雄市火車站";
15 protected void Page_Load(object sender, EventArgs e)
16
{
17
18
}
19 protected void Button1_Click(object sender, EventArgs e)
20 {
21 address = this.TextBox1.Text;
22 }
23}
using System;
using 02
using System.Data;03
using System.Configuration;04
using System.Collections;05
using System.Web;06
using System.Web.Security;07
using System.Web.UI;08
using System.Web.UI.WebControls;09
using System.Web.UI.WebControls.WebParts;10
using System.Web.UI.HtmlControls;11
12
public partial class GoogleMap : System.Web.UI.Page13
{14
public string address = "高雄市火車站";15
protected void Page_Load(object sender, EventArgs e)16
{
17
18
}19
protected void Button1_Click(object sender, EventArgs e)20
{21
address = this.TextBox1.Text;22
}23
}
執行結果：
參考網址：http://www.developer.com/lang/jscript/article.php/3615681