【心得8】11/16

今天使用Google Maps JavaScript API，將Google地圖嵌入網頁，使用「iframe」語法，稱為內置框架或內聯框架，常用來在網頁內嵌入另外一個網頁。

<iframe id="demo"

    src="http://maps.google.com.tw/maps?f=q&hl=zh-TW&geocode=&q=經緯度座標或地址&z=比例&

    t=h衛星圖或p地形圖&output=embed"

    width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" 

    aria-hidden="false" tabindex="0">

</iframe>

也實作了地圖切換功能，我們將google map網址中經緯度的部分改成變數，就可以切換好幾個不同的地圖

 <a href="javascript:f('24.121308,120.677175');">中興大學</a>

 <a href="javascript:f('24.1371547,120.6865921');">台中火車站</a>

 改變參數使用getElementbyId抓住網址，再搭配js當中的setAttribute。

<script>

    function f(loc) {

    var str = 'http://maps.google.com.tw/maps?f=q&hl=zh-TW&geocode=&q=' + loc +

              '&z=16&t=q&output=embed'

    document.getElementById("demo").setAttribute("src", str);

    }

</script>

若要使用導航功能，我們可以使用地圖兩點連線的語法「http://maps.google.com.tw/maps?saddr=起點經緯度座標或地址&daddr=終點經緯度座標或地址」；若要改成「現在位置」至某點則把「saddr=起點」刪掉留下「daddr=終點」，使用手機開啟即可顯示。