1. 在Google Maps搜尋地址或地名
2. 在打卡符號上按右鍵 > 這是哪裡？
例子. http://maps.google.com.tw/maps?f=q&hl=zh-TW&geocode=&q=經緯度座標或地址&z=比例&t=h衛星圖或p地形圖&output=embed（2）路線規劃（點到點）
http://maps.google.com.tw/maps?saddr=起點經緯度座標或地址&daddr=終點經緯度座標或地址（3）嵌入iframe 語法
<iframe width="600" height="450" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/undefined?origin=...&q=...&destination=...¢er=...&zoom=...&key=..." allowfullscreen></iframe>
setAttribute()
用來創建或改變某個新屬性，如果指定屬性已經存在,則只設置該值。
（1）ById
（2）ByTagName
實作
（1）在第一個網頁（web.html）放上一個collection，如下圖
<script>
var a=["business","fitness_center","laptop","hotel"];
var b=["社會管理學院","體育館","資訊科學大樓","女生宿舍"];
var z=["0","1","2","3"]; var text = "";
var i;
for (i = 0; i < a.length; i++) {
text += '<a href="test2.html?XXX=' + z[i] + '">';
text += '<li class="collection-item avatar">';
text += '<i class="medium material-icons circle teal lighten-3">'+a[i]+'</i>';
text += '<span class="title">'+ b[i] +'</span>';
text += '<p>First Line <br>'
text += 'Second Line'
text += '</p>';
text += '</li>';}
document.getElementById("demo").innerHTML = text;
</script>
（2）按下collection的其中一行，跳到下一個頁面顯示地圖（設定為從校門到某處）
＊＊＊將初始位置刪除，就能用手機的定位使用導航
//學習心得//
<!DOCTYPE html>
<html>
<body>
<iframe id="demo" width="100%" height="800" frameborder="0" style="border:0"
src="" allowfullscreen></iframe>
<script>
// 取得網址裡的參數
function GetUrlVar(VarName)
{
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regexS = "[\\?&]" + VarName + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.href);
if (results == null)
return "";
else
return results[1];
}
var x = decodeURIComponent(GetUrlVar('XXX'));
var c=["24.12069,120.6733","24.118844,120.676079","24.12112,120.6771","24.12359,120.6808"];
var url = "http://maps.google.com.tw/maps?saddr=24.123751,120.675018";
url += '&daddr='+ c[x] +'&output=embed'
document.getElementById("demo").setAttribute("src", url);
</script>
</body>
</html>
今天學到了如何將Google Maps嵌入到自己的網頁中。在生活裡，我們時常會接觸、使用到Google Maps，它的便利大幅度的引響了我們的生活，取代了傳統地圖的功能，甚至多了更多方便。所以，能將其引用至自己的網頁上，想必是一大助力，增強了寫出網頁的實用性，讓使用者能更快速地取得更郭樣化的資訊。
沒有留言:
張貼留言