查看完整版本: Google Maps API 輸入地址轉經緯度,並產生地圖程式分享!!

mylife 2008-5-20 20:42

Google Maps API 輸入地址轉經緯度,並產生地圖程式分享!!

這幾天小小研究了Google Maps API的程式...
因為我們要把My-Life旅遊登錄的商家,都自動產生個地圖頁並附上經緯度,

這樣就能夠讓遊客很容易的就知道商家的位置,
有GPS的遊客也很容易的就找到商家的經緯度,可以做定位!

因為在找相關資料時,文章非常少,也沒什麼地方討論!!
特別發這帖,希望需要的朋友能參考及交流!!

首先要寫Google Maps API必須要先擁有API KEY
你能夠到以下網址申請
[url]http://code.google.com/apis/maps/signup.html[/url]
(一個網址需要申請一個API KEY)

申請完後你能在這個頁面找到些範例程式
[url]http://code.google.com/apis/maps/documentation/examples/index.html[/url]
像最簡易的頁面
[url]http://code.google.com/apis/maps/documentation/examples/event-simple.html[/url]
多了控制項的頁面
[url]http://code.google.com/apis/maps/documentation/examples/control-simple.html[/url]
輸入地址轉座標的頁面
[url]http://code.google.com/apis/maps/documentation/examples/geocoding-simple.html[/url]

mylife 2008-5-20 21:33

以簡易的地圖來說,只要將二段程式碼貼入頁面就能擁有自己的地圖了

[color=Red]將此段程式碼貼入<head></head>中[/color][code]    <script src="http://maps.google.com/maps?file=api&v=2&key=輸入你的API KEY" type="text/javascript"></script>
        <script type="text/javascript">
    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(23.88001,120.967584), 13); //改成你要的經緯度,後面的13是預設顯示大小
        map.addControl(new GSmallMapControl()); //小型地圖控制項
        map.addControl(new GMapTypeControl()); //轉換類型地圖控制項
                map.enableGoogleBar(); //左下Google地圖搜尋
        var marker = new GMarker(new GLatLng(23.88001,120.967584)); //建立標籤的經緯度
        map.addOverlay(marker); //顯示標籤
        marker.openInfoWindowHtml("你要顯示的文字"); //顯示對話框及文字

      }
    }
    </script>[/code][color=Red]將此段程式碼貼入<body></body>中[/color][code]<div id="map" style="width: 600px; height: 500px"></div> <!--此為地圖顯示大小-->[/code][color=Red]並修改<body>為[/color][code]<body onload="load()" onunload="GUnload()">[/code]這樣就完成一個簡易的地圖囉...

程式範例請見 [url]http://www.my-life.tw/teaching/googlemaps.php[/url]

mylife 2008-5-20 21:41

另外介紹用地址轉成經緯度的Google Maps API程式寫法
請依上一篇簡易地圖的寫法修改,只要修改function load()這段...[code]    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
            var geocoder = new GClientGeocoder();
        var address = "在這裡輸入你所要顯示的地址"
        map.addControl(new GSmallMapControl());
               
                geocoder.getLatLng(address, function(point) {
                        if (!point) {
                          alert('Google Maps 找不到該地址,無法顯示地圖!'); //如果Google Maps無法顯示該地址的警示文字
                        } else {
                          map.setCenter(point, 13);
                          var marker = new GMarker(point);
                          map.addOverlay(marker);
                          marker.openInfoWindowHtml("在這裡輸入要顯示在對話框的文字");
                        }
                  });
      }
    }
        </script>[/code]我們的旅遊商家地圖範例 [url]http://www.my-life.tw/travel/website/722[/url]

chiahao 2008-5-22 18:27

這個可真是好物啊!!
我之前也有看見其他網站放置google 地圖的例子
例如房屋仲介網之類的

但我有問題想問老大耶
您說一個網址要申請一個API KEY
那老大旗下的商家家多的不像話,不就得每次有店家要登錄的時候
您還要重複去註冊一次,是這樣的意思嗎?

t611209g 2008-5-23 19:28

請教版主, 用地址轉成經緯度的Google Maps API程式寫法中, 如果輸入台北市信義路五段七號101樓是ok的, 但如果輸入高雄市光華一路206號就找不到, 不知版主知不知道原因? 謝謝

mylife 2008-5-23 21:27

[quote]原帖由 [i]chiahao[/i] 於 2008-5-22 18:27 發表 [url=http://www.my-life.tw/hosting-talk/redirect.php?goto=findpost&pid=1803&ptid=418][img]http://www.my-life.tw/hosting-talk/images/common/back.gif[/img][/url]
這個可真是好物啊!!
我之前也有看見其他網站放置google 地圖的例子
例如房屋仲介網之類的

但我有問題想問老大耶
您說一個網址要申請一個API KEY
那老大旗下的商家家多的不像話,不就得每次有店家要登錄的時候
您還要 ... [/quote]

不是啦,是像這些地圖要在my-life.tw下面用,就要有一個API KEY
程式移到別的網域,就不行囉,要再申請另一個API KEY...

mylife 2008-5-23 21:32

[quote]原帖由 [i]t611209g[/i] 於 2008-5-23 19:28 發表 [url=http://www.my-life.tw/hosting-talk/redirect.php?goto=findpost&pid=1815&ptid=418][img]http://www.my-life.tw/hosting-talk/images/common/back.gif[/img][/url]
請教版主, 用地址轉成經緯度的Google Maps API程式寫法中, 如果輸入台北市信義路五段七號101樓是ok的, 但如果輸入高雄市光華一路206號就找不到, 不知版主知不知道原因? 謝謝 ... [/quote]

如果地址是正確的就是google裡沒有這個資料了,
你可以減短一點搜尋看看,像高雄市光華一路、高雄市光華路看有沒辦法找的到。

像有時候是地址錯,像南投縣魚池鄉日月潭名勝街3號,其實日月潭是多的,就會錯。
南投縣魚池鄉名勝街3號,就可以找的到。

如果真的找不到就要用經緯度去定位了。

t611209g 2008-5-24 03:47

嗯, 版主謝謝你, 高雄市光華一路206號的確是存在的, 我再找找為何google找不到...

mylife 2008-5-24 10:25

我用google msps搜是找的到的...
[url]http://maps.google.com.tw/maps?f=q&hl=zh-TW&geocode=&q=%E9%AB%98%E9%9B%84%E5%B8%82%E5%85%89%E8%8F%AF%E4%B8%80%E8%B7%AF206%E8%99%9F[/url]

t611209g 2008-5-24 11:59

因為自己要弄一網站, 當使用者輸入地址後, 程式必須馬上可以求得經緯度, 所以就沒辦法手動的針對每一住址去求得經緯度, 突然想到把 <script src="http://maps.google.com/maps?file=api&v=2&key=輸入你的API KEY" type="text/javascript"></script>改成<script src="http://maps.google.com.tw/maps?file=api&v=2&key=輸入你的API KEY" type="text/javascript"></script>, 不曉得可不可以齁, 試試

mylife 2008-5-24 17:55

哈~~認真看了二段程式有什麼不同,終於看到了!
你覺得國外的google 地圖看不同台灣地址就對了~呵

chiahao 2008-5-26 08:45

[quote]原帖由 [i]mylife[/i] 於 2008-5-23 21:27 發表 [url=http://www.my-life.tw/hosting-talk/redirect.php?goto=findpost&pid=1823&ptid=418][img]http://www.my-life.tw/hosting-talk/images/common/back.gif[/img][/url]


不是啦,是像這些地圖要在my-life.tw下面用,就要有一個API KEY
程式移到別的網域,就不行囉,要再申請另一個API KEY... [/quote]
原來是一個網域底下的網頁都可以使用
那麼我了改了,這樣子的話我也想試看看捏~~
:P

mylife 2008-5-26 13:28

嗯嗯...加油!!~
這樣你就不用幫客戶畫地圖啦...方便多了...

chiahao 2008-5-27 16:31

感謝老大,我剛剛也試了一個ok!!
[url=http://momoko.ws/WaterLiu/map.htm]http://momoko.ws/WaterLiu/map.htm[/url]
只不過我不曉得要怎麼修改message裡的字體大小耶..
想要修改的小一點像您那樣,感覺會比較好看一點
用<font size></font>框起來也不太對,地圖會跑不出來

此外我覺得用中文輸入查詢經緯度很酷
不清楚google是怎麼辦到的,台灣的地址沒有一個很好的規則
就連urmap好像也只能輸入路名查詢而已(還是我沒找到?)
就算有也要等網友來回報此處地址

gmap雖然輸入的地址格式要有點謹慎,但我覺得能做到這樣已經非常強了~~
而且,還是免費的....
:D

[[i] 本帖最後由 chiahao 於 2008-5-27 16:32 編輯 [/i]]

mylife 2008-5-27 17:33

我是用css 設定的....
<div id="map" style="width: 430px; height: 400px" class="style1"></div>
font 不能改哦?...我一直覺得可以...

地址轉成經緯度真的是個大工程...而且google還做全球的...
urmap好像也可以打地址吧...

我現比較困擾是金門馬祖好像不適用...在地圖上消失了...回歸中國去了...

chiahao 2008-5-28 00:11

感謝老大,我再找時間來試看看
連這偏遠鳥地方的網頁都有縣道標號
對我而言已經夠實用了..

urmap我也常用,但好像只能打地標,或顯著路名
我家(二聖二巷)就找不到了,但是在gmap有,而且全部連號碼打出來居然還可以找的到

而且進階的urmap api功能好像是要收費的
廣告太多有點討厭,但畢竟是國產的服務應該要支持一下
只是目前沒經費,只好先用免費的看看

老大可以寫信去把金門馬祖要回來,順便連釣魚台也要看看
:lol

mylife 2008-5-28 16:13

可能是要打中國福建省金門地區之類的吧...

minenix 2008-10-19 21:35

不好意思,請問如果要撰寫地址轉成經緯度的Google Maps API程式寫法,
但是那個地址是要以txt或者xml載入資訊的話,不知道應該如何撰寫。

參考很多範例及網路資料,拿來使用都無法成功。
有拿市面上很多google API教學書中的光碟範例,
打開後,也沒有看到範例中載入座標,是否那些範例太久,又更新了一些安全性呢?

不知道有沒有人可以指教提點??

chiahao 2008-10-21 00:39

要使用xml做載入的話,一定要知道如何讀取xml資料
基本上都不難,但我沒深入研究過不太清楚,直覺就是可以
因為讀取/轉換txt 或 xml資料是動態網頁的基本功能之一

但是想問你,載入外部資訊是
一筆,多筆?
取得地址是要用在何處?

轉換地址為經緯度請參閱GClientGeocoder函式的用法
孤狗一下吧

minenix 2008-11-13 17:17

我利用這個GDownloadUrl 讀取了xml也同時解決瀏覽器問題。

chiahao 2008-11-14 08:48

如果願意的話分享一下作法給大家知道吧
有分享有討論才會更進步
:)

yelmous 2008-12-17 14:05

我們公司最近也在做有關於Google Map的案子
所以在這方面也花了不少時間
有機會可以一起研究研究...

[url]http://ecolife.epa.gov.tw[/url]

energy80420 2009-3-25 16:26

回復 2# 的帖子

你好~我想用PHP來顯示google map 的
於是就先用了你所示範的兩段程式碼
雖然沒錯誤 但是地圖還是沒有顯示

想請問一下  是什麼原因?
感恩

chiahao 2009-3-26 08:26

請問您有先去和google申請api key嗎
這個api key是認網域的哦

nickjazz 2010-3-12 22:35

我有個問題解決不到,

1,使用者輸入地址后,如何加入“標註googlemap”,來確認一下是否有找到這個點呢? 
2,至於表格發送,顯示出來時,應該可以利用“地址”的參數來應用,對嗎?

sfsdf5566 2010-7-4 21:53

我想請問一下
要如何用google map 之後能夠抓到資料庫的座標呢?
那個PHP我不知道要怎麼寫
才能夠放在google map裡面
而且想要能夠直接顯示在地圖上
這個位址
請問可以給程式碼看看嗎?
頁: [1]
查看完整版本: Google Maps API 輸入地址轉經緯度,並產生地圖程式分享!!