利用ASP.NET結合GoogleMap的Geocoding Service,提供一個簡易Address查詢功能

2008-03-06

47392
0
ASP.NET

最近看到有人提到這方面的問題...
小弟就做了一個簡單版的demo程式...
如何使用asp.net結合google map 的Geocoding Service
提供使用者輸入address,然後快速找到地圖的位置....c#範例..

GoogleMap.aspx

   1:  <%@ Page Language="C#" AutoEventWireup="true" CodeFile="GoogleMap.aspx.cs" Inherits="GoogleMap" %>

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>Google Map</title>

   8:      <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA-aWzeXZzb2erLxHs9uO0GhR7tCGSxHqBYteMGl2e75HAQnVqdRTskvZqM-9lGi-Lbkd346AVNoH6hg"

   9:  type="text/javascript"></script>

  10:  <script type="text/javascript">

11:

  12:      //<![CDATA[

13:

  14:     var geocoder;

  15:     var map;

16:

  17:     //var address = "高雄市火車站";

  18:     var address = "<%= this.address %>";

19:

  20:     // On page load, call this function

21:

  22:     function load()

  23:     {

  24:        // Create new map object

  25:        map = new GMap2(document.getElementById("map"));

26:

  27:        // Create new geocoding object

  28:        geocoder = new GClientGeocoder();

29:

  30:        // Retrieve location information, pass it to addToMap()

  31:        geocoder.getLocations(address, addToMap);

  32:     }

33:

  34:     // This function adds the point to the map

35:

  36:     function addToMap(response)

  37:     {

  38:        // Retrieve the object

  39:        place = response.Placemark[0];

40:

  41:        // Retrieve the latitude and longitude

  42:        point = new GLatLng(place.Point.coordinates[1],place.Point.coordinates[0]);

43:

  44:        // Center the map on this point

  45:        map.setCenter(point, 13);

46:

  47:        // Create a marker

  48:        marker = new GMarker(point);

49:

  50:        // Add the marker to map

  51:        map.addOverlay(marker);

52:

  53:        // Add address information to marker

  54:        marker.openInfoWindowHtml(place.address);

  55:     }

56:

  57:      //]]>

  58:      </script>

  59:  </head>

  60:  <body onload="load()" onunload="GUnload()">

  61:      <form id="form1" runat="server">

  62:          <asp:TextBox ID="TextBox1" runat="server" Width="400px"></asp:TextBox>

  63:          <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Search" /><br />

  64:          <div id="map" style="width: 100%; height: 500px; border-right: black thin solid; border-top: black thin solid; border-left: black thin solid; border-bottom: black thin solid;"></div>

  65:      </form>

  66:  </body>

  67:  </html>

GoogleMap.aspx.cs

   1:  using System;

   2:  using System.Data;

   3:  using System.Configuration;

   4:  using System.Collections;

   5:  using System.Web;

   6:  using System.Web.Security;

   7:  using System.Web.UI;

   8:  using System.Web.UI.WebControls;

   9:  using System.Web.UI.WebControls.WebParts;

  10:  using System.Web.UI.HtmlControls;

11:

  12:  public 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:  }

執行結果：

參考網址：http://www.developer.com/lang/jscript/article.php/3615681

回首頁