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

DAY 8

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

php jquery 分享工作 mobile 職場鐵人賽 it人生鐵人

SunAllen

2013-10-09 01:01:27

5575 瀏覽

分享至

參考了國外的旅遊網站後，太陽決定要將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鐵人賽_文章總覽
 個人全系列連結