iT邦幫忙

DAY 8
5

東之宿_網站開發系列 第 8

東之宿_開發日誌-9(Google MAP Basic)

  • 分享至 

  • xImage
  •  

參考了國外的旅遊網站後,太陽決定要將Desktop版和Mobile版分開的主要原因就是...雖然是同樣的內容,但應該要有不同的功能和呈現,主要的差別是在於,操控的方式不同和螢幕大小不同以及旅行前和旅行中使用的設備不同。
即使到了現在,太陽還是被困在Google MAP API裏,在他將Google MAP API V2的功能測出來後的某一天,他看見了Google MAP API V3問世了...

目前他還沒有時間,再回頭去改成Google MAP API V3,一個人兩隻手,在每天的24小時裏,能做的事情種類,實在很有限,因此依重要優先順序排列下來後,他決定年底再改成Google MAP API V3。

參考了國外的旅遊網站後,太陽決定要將Desktop版和Mobile版分開的主要原因就是...雖然是同樣的內容,但應該要有不同的功能和呈現,主要的差別是在於,操控的方式不同和螢幕大小不同以及旅行前和旅行中使用的設備不同。

Google Map API,就是太陽遇到的最大障礙。網站一開始時,他將靜態的資料,寫進網頁裏,測試時,可以看到在地圖上,顯示出他想要的結果,這沒有什麼問題,因為資料是靜態的。甚至是路線規劃,也做的出來,但也是靜態的資料。

像是下面這一段...

<!--Google Map 靜態地圖-->

<script>
var myCenter=new google.maps.LatLng(22.793707,121.101549); <--這邊輸入經緯度,這個地點的地圖就出現了!
var marker;

function initialize()
{
var mapProp = {
  center:myCenter,
  zoom:16, <--地圖大小。
  mapTypeId:google.maps.MapTypeId.ROADMAP <--地圖類型。
  };

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker=new google.maps.Marker({
  position:myCenter,
  });

marker.setMap(map);

var infowindow = new google.maps.InfoWindow({
  content: '<IMG BORDER="0" ALIGN="Left" SRC="a1.jpg" width=25%></br>歡迎光臨-台東彩虹55號' <--地圖上顯示的位置照片和描述。
 
  });

infowindow.open(map,marker);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

這些靜態的資料,如果要透過PHP從MySQL資料庫中抓出來,該怎麼放進JavaScript裏...這個問題,困住了太陽好久好久,就算上網搜尋解決方案,他也因為看不懂而放棄。

在困擾了兩、三個月之後,他決定先測試路線規劃,在參考Google MAP API之後,他測試出來的路線規劃這個功能。

(待)

下回預告:
明天將介紹,Google MAP API 路線規劃功能。

2013/10/09 SunAllen

鐵人賽_開發技術組_文章導覽

上一篇
下一篇

2013鐵人賽_文章總覽
個人全系列連結


上一篇
東之宿_開發日誌-8(Bootstrap 初試)
下一篇
東之宿_開發日誌-10(Google MAP 路線規劃)
系列文
東之宿_網站開發16
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
CalvinKuo
iT邦大師 7 級 ‧ 2013-10-09 09:53:01

沙發拍手
用心寫好文要推。

SunAllen iT邦研究生 1 級 ‧ 2013-10-09 10:18:33 檢舉

謝謝...不過,快要難產了Orz

我要留言

立即登入留言