課程核心：http://maps.google.com.tw/maps?f=q&hl=zh-TW&geocode=&q=經緯度座標或地址&z=比例&t=h衛星圖或p地形圖&output=embed(如果要嵌入iframe的話)
改寫：直接到Google Map上面找一個點，雙點右鍵，選擇“這是哪裡”的選項，就可以得到經緯度座標
Ex: https://www.google.com.tw/maps?f=q&hl=zh-TW&q=24.121308,120.677175&z=16&t=q
1. iframe 學習網址：https://www.w3schools.com/tags/tag_iframe.asp
(1). 用途 : 在自己的網頁上面，挖一個洞，讓這個地分放入其他的網頁
(2). 語法：
<!DOCTYPE html>
<html>
<body>
<iframe src=“https://www.w3schools.com”> // 可自由更改
<p>Your browser does not support iframes.</p>
</iframe>
#<iframe src="https://www.w3schools.com" height="500" width="600"></iframe>
網址取代紅字
</body>
</html>
(3).陽春版嵌入式Google地圖 網頁語法：
<!DOCTYPE html>
<html>
<body> //網址切記，不要亂留空白！！！！
<iframe src="https://www.google.com.tw/maps?f=q&hl=zh-
TW&q=24.121308,120.677175&z=16&t=q&output=embed" height="500"
width="600"></iframe>
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
2. 校園導覽地圖：
(1)語法：
http://maps.google.com.tw/maps?saddr=起點經緯度座標或地址&daddr=終點經緯度座
標或地址
(2)Ex: http://maps.google.com.tw/maps?saddr=24.121308,120.677175&daddr=24.118733,120.672583
3. 本週課堂教學：
先開一個檔案，命名為 aaa.html
<!DOCTYPE html>
<html>
<body>
<iframe id = "demo" src="#" width="100%" height="500">
<p>Your browser does not support iframes.</p>
</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 n = decodeURIComponent(GetUrlVar('xxx'));
var url = "http://maps.google.com.tw/maps?f=q&hl=zh-TW&q= '+ n +'&z=16&output=embed";
document.getElementById("demo").setAttribute("src",url);
</script>
</body>
</html>
再開主檔案：
<!DOCTYPE html><html>
<head>
</head>
<body>
<div id ="demo"> //等等準備被取代掉的，如果成功 xxx就會變成超連結的形式
xxx
</div>
<script>
var X = ["24.121934, 120.675593","24.130610, 120.684206","24.137574, 120.686678"];
// var X 是 GoogleMap的經緯度座標
var s = "";
//設定一個空的矩陣
for (i=0;i<X.length;i++)
{
s += "<a href = 'aaa.html?xxx=" + X[i] + "'>MAP</a><br />"; //上面的檔案
}
document.getElementById("demo").innerHTML = s;
</script>
</body>
</html>
沒有留言:
張貼留言