google map顯示不完全

google map api相關的資料和實作,網路上很多人都有po文了,就沒必要再去做重覆的使用說明,就寫下我遇到的問題吧。

1. 到Sign Up for the Google Maps API申請API鑰匙

2. 把這code
<script src="http://maps.google.com/maps?file=api&v=2&key=API鑰匙" type="text/javascript"></script>
放置到<head></head>之間

3. 將下述代碼放至網頁中

<div id="mymap" style="width: 500px; height: 500px"></div>
<script type="text/javascript">
//<![CDATA[
var map = new GMap2(document.getElementById("mymap"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
var pos = new GLatLng(25.037026,121.447624);
map.setCenter(pos,16);
var mark = new GMarker(pos);
map.addOverlay(mark);
map.openInfoWindow(map.getCenter(), document.createTextNode("AMC王品鑽石台北新莊直營門市"));
//]]>
</script>

4. 結果如圖所示,初開啟時顯示不完全,但若將網頁還原最大化後,就會顯示正常(ie6和ie7有這問題,但firefox2沒有)
google map顯示不完全

原因:
在網頁未完全載入前,即開始執行地圖顯示

修正:
1. 在<body>裡面增加onload和unload方法
<body onload="LoadStoreMap()" unload="GUnload()">

2. 把上述script代碼用function包起來

<div id="mymap" style="width: 500px; height: 500px"></div>
<script type="text/javascript">
//<![CDATA[
function LoadStoreMap() {
var map = new GMap2(document.getElementById("mymap"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
var pos = new GLatLng(25.037026,121.447624);
map.setCenter(pos,16);
var mark = new GMarker(pos);
map.addOverlay(mark);
map.openInfoWindow(map.getCenter(), document.createTextNode("AMC王品鑽石台北新莊直營門市"));
}
//]]>
</script>

後記:原先參考別人資料時沒想那麼多,看來很簡單,就直接改來用,遇到這問題還覺得奇怪,怎麼ie不正常但firefox卻正常,就歸到ie的bug。

後來另外一個project要做動態的地址,搜到這篇文章使用google map api來做地址定位,看到它使用load和unload,才想到那個問題應該是載入未完全所致,果然,稍加修改就ok。

附註:查到很多google map的使用範例都是用v1版,要注意現在google給的script預設都是v2版。更進一步的實作,還是多看看官方文件吧。

靜態地圖這以後用得到,把這關鍵字記錄起來;另外也有人嚐試不使用API KEY來連結,挺有趣的也記一筆。

您可能也會喜歡…

2 個回應

  1. liuway表示:

    谢谢,经过提醒解决了我的问题,

  2. 阿卡表示:

    謝謝您的教學~

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *