標籤

more tags...

最新回覆

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

最近看到有人提到這方面的問題...
小弟就做了一個簡單版的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:  }
執行結果:
GoogleMap

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

 
推到 Twitter!
推到 Plurk!


 

2008/3/6 01:00| 閱讀數 : 5540 | 我要推薦 | 11 Comments | 文章分類 : ASP.NET 訂閱


回覆

# re: 利用ASP.NET結合GoogleMap的Geocoding Service,提供一個簡易Address查詢功能, Posted by GG on 2008/3/6 上午 11:47  回覆

您好:

請問,script 中的"
http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA-aWzeXZzb2erLxHs9uO0GhR7tCGSxHqBYteMGl2e75HAQnVqdRTskvZqM-9lGi-Lbkd346AVNoH6hg"

值是如何得到?

我試著執行,出現了下列訊息,
"This application is currently offline. To enable the application, remove the app_offline.htm file from the application root directory. "


煩請指教,謝謝! ^^

# re: 利用ASP.NET結合GoogleMap的Geocoding Service,提供一個簡易Address查詢功能, Posted by puma on 2008/3/7 上午 12:49  回覆

這個key你可以到

http://code.google.com/apis/maps/signup.html

去申請一個key

# re: 利用ASP.NET結合GoogleMap的Geocoding Service,提供一個簡易Address查詢功能, Posted by Jean on 2008/6/6 下午 05:09  回覆

我已經有申請API Key了,可是為何網頁上地圖完全沒出現??(有Google的字樣)而且輸入地址搜尋也沒反應??

# re: 利用ASP.NET結合GoogleMap的Geocoding Service,提供一個簡易Address查詢功能, Posted by Net Framework Development on 2008/9/9 下午 03:09  回覆

Nice code example... thank you dude...

# re: 利用ASP.NET結合GoogleMap的Geocoding Service,提供一個簡易Address查詢功能, Posted by Andy on 2009/4/1 下午 01:55  回覆

很不錯的API,請問這地圖可以縮放嗎 ?

# re: 利用ASP.NET結合GoogleMap的Geocoding Service,提供一個簡易Address查詢功能, Posted by puma on 2009/4/1 下午 03:51  回覆

to Andy,

應該是可以的,但我很久沒玩google map api了..好像有新版的..

你可以參考這個網址,看它的原始碼

http://code.google.com/intl/zh-TW/apis/maps/documentation/examples/map-simple.html

有一個叫map.setUIToDefault();
應該就是開啓預設的功能..包含Zoom in out的功能..

# re: 利用ASP.NET結合GoogleMap的Geocoding Service,提供一個簡易Address查詢功能, Posted by Andy on 2009/4/3 上午 11:08  回覆

大大果然厲害,加了 map.setUIToDefault();
就可以縮放了,也可以選擇 地圖、衛星 等功能。

另外 我在這部落格另個主題有發問
【利用ASP.NET的WebRequest來判斷URL網址是否正常,並且結合IECapt取得URL的畫面 】

不知這問題有解嗎 ? 謝謝 ~~

# re: 利用ASP.NET結合GoogleMap的Geocoding Service,提供一個簡易Address查詢功能, Posted by Patrick on 2009/7/24 下午 11:33  回覆

I hope you can help me too, since I've tried so many ways available on the net and I still can't get it right.

My problem is I can't pass the value of a Label control to the javascript variable. The Label control dynamically gets value from DB, and i managed to display the value in this label called "lblmap".

I would like to pass the value of "lblmap" to a javascript variable called "address". I've tried the code in <script> as below:

1. var address = document.getElementById('<%=lblmap%>').value;
2. var address = document.getElementById('<%=lblmap%>').innerHTML;
3. var address = document.getElementById('lblmap').value;
4. var address = document.getElementById('lblmap').innerHTML;
5. var mapaddress = '<%=lblmap%>';
var address = document.getElementById(mapaddress).value;

none of the above works, when i run the project, IE complaint the "object doesn't support this property or method". I'll need to assign an address (e.g. 123 Main Street, Sydney NSW 2000, Australia) to the address variable, the google map i'm working on will automatically point and mark based on this address variable.

Currently if i assign a static (hard coded) value to this address variable, the map will display correctly (e.g. var address = "123 main street, sydney NSW 2000, Australia).

I hope you can understand my question and wish you could help.

# re: 利用ASP.NET結合GoogleMap的Geocoding Service,提供一個簡易Address查詢功能, Posted by 小妞ㄦ on 2009/7/25 下午 03:57  回覆

你好!
我最近正再寫一個google MAP的網頁
我現在想要在一個頁面上輸入"地址"後,
再按button到另一個頁面
希望可以將上一個頁面所輸入的地址
傳到第二個頁面的"地址欄位"
然後在page load時可以一起標示此地址

不知有解嗎?謝謝~

# re: 利用ASP.NET結合GoogleMap的Geocoding Service,提供一個簡易Address查詢功能, Posted by puma on 2009/8/29 上午 10:20  回覆

to 小妞ㄦ,

你說的功能,應該是很容易達到的,

step1 把 page1 的資料 傳到 page2 應該很簡單

step2 只要針對page1傳過來的值 給google map 初值查詢值就可以達到了

# re: 利用ASP.NET結合GoogleMap的Geocoding Service,提供一個簡易Address查詢功能, Posted by 明靈帝 on 2009/11/1 下午 12:21  回覆

想請問一下
有沒有辦法一次標很多住址
比如我有十個中文住址
如何讓他循環標註
裡面加上判斷住址無效就不要標進去

發表回覆

標題: *
姓名: *
Email: (將不會被顯示)
Url:
回覆: *
登入後使用進階評論
Please add 1 and 4 and type the answer here:
F6 Team logo


用BloggerAds 替自已加薪

每月文章

文章分類

推薦討論區

推薦部落格