HTML上課筆記
===
9/18
===
## HTML
> Hyper Text Markdown Language
```htmlmixed=
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
header {
background-color: #666;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
```
### 標籤說明
* \<!DOCTYPE html\>
> 明確指出這是html5
* \<head\>
> 設定相關
* \<title\>
> 標籤文字
* \<body\>
>內容
* \<h1 ... 5\>
> 標題
* \<p\>
> 段落
## CSS
```htmlmixed=
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Style the header */
header {
background-color: #666;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
</style>
```
### CSS 簡單說明
* \<style\>
> 可以放 css
* background-color
> 可以來更改顏色
> #000000[color=#000000]
> #ff8800 [color=#ff8800]
## HTML 圖片
```htmlmixed=
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
```
* \<img\>
* 插入圖片
* src
* 圖片的來源
* style
* 也可以用 css 的做法來更改圖片大小
* width 寬
* height 長
## HTML 超連結
```htmlmixed=
<a href="https://www.w3schools.com/">Visit W3Schools!</a>
```
* 把要超連結的文字用 \<a\> \</a\> 把它夾住
* \<a\>
* 可以在網頁上面放超連結
* href
* 要連結網頁的網址
```htmlmixed=
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>
```
* 也可以直接用圖片來連結
* 在 \<a\> 裡面放 \<img\>
```htmlmixed=
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
```
* target 參數可以用來設定按下連結之後網頁要如何開起
* _blank 在新分頁中開起
* _self 在原本的分頁中開起
## Javascript
```htmlmixed=
<!DOCTYPE html>
<html>
<head>
<script>
function f1()
{
document.getElementById("x").innerHTML = '<img src="http://1.bp.blogspot.com/-xdHGOG59LCI/UjawN7V-deI/AAAAAAAABb8/v3dHRriJkjo/s1600/EUCL%E4%B8%8A%E5%8F%B0%E9%A0%98%E7%8D%8E01.jpg" width="100%">'
}
function f2()
{
document.getElementById("x").innerHTML = '<img src="http://4.bp.blogspot.com/-UKB9Pburh8I/Ujawb7t3wGI/AAAAAAAABcE/2h3OMM1sb-0/s1600/Frocius+Android%E4%B8%8A%E5%8F%B0%E9%A0%98%E7%8D%8E01.jpg" width="100%">'
}
</script>
</head>
<body>
<div id="x">
<img src="http://1.bp.blogspot.com/-xdHGOG59LCI/UjawN7V-deI/AAAAAAAABb8/v3dHRriJkjo/s1600/EUCL%E4%B8%8A%E5%8F%B0%E9%A0%98%E7%8D%8E01.jpg" width="100%">
</div>
<a href="javascript:f1();">上一張</a>
<a href="javascript:f2();">下一張</a>
</body>
</html>
```
* 用 \<script\> 把 javascipt 包起來
### js 解釋
* function 簡介
* function function_名稱(function_參數){}
* 可把寫好的 function 放在 \<head\> 中
* 在 href 中，可以用 javascript:function() 的方法來指定執行 function
* id funcion 運作方法
```htmlmixed=
<script>
function f1(){
<!--document.getElementById() 可以去找html中的id-->
<!--把找到的 div 中的 html 的 img 改成 flower.jpg-->
document.getElementById("x").innerHTML = '<img src="flower.jpg" width="100%">'
}
function f2(){
document.getElementById("x").innerHTML = '<img src="car.jpg" width="100%">'
}
</script>
<div id="x"> <!--把 div 給一個 id "x"-->
<p>Message</p>
</div>
```
9/25 Day 2
===
0925
* div
* 可以另外隔出一個獨立的區域
* 指定id可以方便選取指定的區域
``` javascript=
<style>
function myFunction()(){
document.getElementById("demo").style.color = "red"
}
</style>
<body>
<div>
<p id="demo">this is a text</p>
<button type="button" onclick="myFunction()">Try it</button>
</div>
</body>
```
``` javascript=
<html>
<body>
<h2>JavaScript Arrays</h2>
<p id="demo"></p>
<script>
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>
</body>
</html>
```
## Homework
* 使用 if else 來使 code 更合理
https://jsfiddle.net/pnf0zh81/
## 繼上次上課的內容
* div
> 可以用來特別隔出一個區域
> 來特別指定一個 id
* 單引號 & 雙引號
>都可以使用
* 下面的程式是可以把一行字的顏色改成紅色
* 利用 style.color = "red" 來更改
```javascript=
<style>
function myFunction()(){
document.getElementById("demo").style.color = "red"
}
</style>
<body>
<div>
<p id="demo">this is a text</p>
<button type="button" onclick="myFunction()">Try it</button>
</div>
</body>
```
## 更總明的寫法
* 如果遇到了好多張圖
* 可以不用寫很多的 function
* 解決辨法：
* 1. 利用 function 傳參數 -> 網址 的方法
* 2. 利用 陣列 傳 index 的方法
* 把網址們，一起存放在一個陣列裡面
* 利用 index 的方法來當參數來取值傳給 javascript
```htmlmixed=
<!DOCTYPE html>
<html>
<head>
<script>
i = 0;
x = [ "http://1.bp.blogspot.com/-xdHGOG59LCI/UjawN7V-deI/AAAAAAAABb8/v3dHRriJkjo/s1600/EUCL%E4%B8%8A%E5%8F%B0%E9%A0%98%E7%8D%8E01.jpg",
"http://4.bp.blogspot.com/-UKB9Pburh8I/Ujawb7t3wGI/AAAAAAAABcE/2h3OMM1sb-0/s1600/Frocius+Android%E4%B8%8A%E5%8F%B0%E9%A0%98%E7%8D%8E01.jpg",
"http://4.bp.blogspot.com/-p-YNGTeHwM0/UjawjF1fwoI/AAAAAAAABcM/YrenoO-Mcg8/s1600/devabchb%E4%B8%8A%E5%8F%B0%E9%A0%98%E7%8D%8E01.jpg",
"http://2.bp.blogspot.com/-xPreUlrSYv8/UjayQmzNzPI/AAAAAAAABcY/AxJVYPKmVxI/s1600/A+Team%E5%B1%95%E7%A4%BA%E6%94%A4%E4%BD%8D01.jpg" ]
function f(y)
{
i = i + y;
document.getElementById("demo").innerHTML = "<img src='" + x[i] + "' width='100%'>"
}
</script>
</head>
<body>
<div id="demo">
<img src='http://1.bp.blogspot.com/-xdHGOG59LCI/UjawN7V-deI/AAAAAAAABb8/v3dHRriJkjo/s1600/EUCL%E4%B8%8A%E5%8F%B0%E9%A0%98%E7%8D%8E01.jpg' width='100%'>
</div>
<a href="javascript:f(-1);">上一張</a>
<a href="javascript:f(1);">下一張</a>
</body>
</html>
```
JavaScript 的陣列
===
* var cars = ["aa", "bb", "cc"] 宣告一個陣列存著三個字串
```htmlmixed=
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p id="demo"></p>
<script>
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
<!--這樣會印出 Saab, Volvo, BMW-->
document.getElementById("demo").innerHTML = cars[0];
<!--這樣會印出 Saab-->
</script>
</body>
</html>
```
## 全域變數 和 區域變數
* 上上面例子中的 i
* 要宣告在 function 外面
* 因為要讓這個變數一直記著之前的值，而不會一直被初使化歸零
* 全域變數 -> 大家都 call 的到這個變數的值
* 區域變數 -> 只有在 function 內才可以 call 到變數的值
## 如何 debug
* 看錯誤訊息
10/9
===
## 連續播放
* 可以輪流播放圖片
* 使用 setInterval()
* 用 mod 的方法就可以不用條件判斷了
```htmlmixed=
<!DOCTYPE html>
<html>
<head>
<script>
i = 0;
var x = ["http://1.bp.blogspot.com/-xdHGOG59LCI/UjawN7V-deI/AAAAAAAABb8/v3dHRriJkjo/s1600/EUCL%E4%B8%8A%E5%8F%B0%E9%A0%98%E7%8D%8E01.jpg",
"http://4.bp.blogspot.com/-UKB9Pburh8I/Ujawb7t3wGI/AAAAAAAABcE/2h3OMM1sb-0/s1600/Frocius+Android%E4%B8%8A%E5%8F%B0%E9%A0%98%E7%8D%8E01.jpg",
"http://4.bp.blogspot.com/-p-YNGTeHwM0/UjawjF1fwoI/AAAAAAAABcM/YrenoO-Mcg8/s1600/devabchb%E4%B8%8A%E5%8F%B0%E9%A0%98%E7%8D%8E01.jpg",
"http://2.bp.blogspot.com/-xPreUlrSYv8/UjayQmzNzPI/AAAAAAAABcY/AxJVYPKmVxI/s1600/A+Team%E5%B1%95%E7%A4%BA%E6%94%A4%E4%BD%8D01.jpg"
]
function f(y) {
if (i + y < x.length && i + y >= 0) {
i = i + y;
document.getElementById("demo").innerHTML = "<img src='" + x[i] + "' width='100%'>"
} else {
alert("這裡沒有圖片囉！");
}
}
function autoplay(){
setInterval(function(){
i++;
i = (i + x.length) % x.length;
document.getElementById("demo").innerHTML = "<img src='" + x[i] + "' width='100%'>"
}, 3000)
}
</script>
</head>
<body>
<div id="demo">
<img src='http://1.bp.blogspot.com/-xdHGOG59LCI/UjawN7V-deI/AAAAAAAABb8/v3dHRriJkjo/s1600/EUCL%E4%B8%8A%E5%8F%B0%E9%A0%98%E7%8D%8E01.jpg' width='100%'>
</div>
<a href="javascript:f(-1);">上一張</a>
<a href="javascript:f(1);">下一張</a>
<a href="javascript:autoplay()">自動播放</a>
</body>
</html>
```
## 停止連續播放
* 可以停止輪流播放圖片
* 使用 clearInterval()
* 把 setInterval() 的回傳值放進 clearInterval() 就可以停下來了
```htmlmixed=
<!DOCTYPE html>
<html>
<head>
<script>
i = 0;
var x = ["http://1.bp.blogspot.com/-xdHGOG59LCI/UjawN7V-deI/AAAAAAAABb8/v3dHRriJkjo/s1600/EUCL%E4%B8%8A%E5%8F%B0%E9%A0%98%E7%8D%8E01.jpg",
"http://4.bp.blogspot.com/-UKB9Pburh8I/Ujawb7t3wGI/AAAAAAAABcE/2h3OMM1sb-0/s1600/Frocius+Android%E4%B8%8A%E5%8F%B0%E9%A0%98%E7%8D%8E01.jpg",
"http://4.bp.blogspot.com/-p-YNGTeHwM0/UjawjF1fwoI/AAAAAAAABcM/YrenoO-Mcg8/s1600/devabchb%E4%B8%8A%E5%8F%B0%E9%A0%98%E7%8D%8E01.jpg",
"http://2.bp.blogspot.com/-xPreUlrSYv8/UjayQmzNzPI/AAAAAAAABcY/AxJVYPKmVxI/s1600/A+Team%E5%B1%95%E7%A4%BA%E6%94%A4%E4%BD%8D01.jpg"
]
function f(y) {
if (i + y < x.length && i + y >= 0) {
i = i + y;
document.getElementById("demo").innerHTML = "<img src='" + x[i] + "' width='100%'>"
} else {
alert("這裡沒有圖片囉！");
}
}
var play;
function autoplay(){
play = setInterval(function(){
i++;
i = (i + x.length) % x.length;
document.getElementById("demo").innerHTML = "<img src='" + x[i] + "' width='100%'>"
}, 3000)
}
function stopplay(){
clearInterval(play);
}
</script>
</head>
<body>
<div id="demo">
<img src='http://1.bp.blogspot.com/-xdHGOG59LCI/UjawN7V-deI/AAAAAAAABb8/v3dHRriJkjo/s1600/EUCL%E4%B8%8A%E5%8F%B0%E9%A0%98%E7%8D%8E01.jpg' width='100%'>
</div>
<a href="javascript:f(-1);">上一張</a>
<a href="javascript:f(1);">下一張</a>
<a href="javascript:autoplay()">自動播放</a>
<a href="javascript:stopplay()">停止播放</a>
</body>
</html>
```
setTimeout() 也可以達到與 setInterval() 類似的效果，唯一的差別是 setTimeout() 只會執行一次，setInterval() 則會週期性地不斷執行。
10/16
===
## 路徑
* 可以直接貼上圖片的網址
* 用絕對路徑的方法存取圖片
* 可以建立獨立的資料夾儲存圖片
## 響應式網頁設計 Responsive Web Design
* 跟據網頁的大小自己去調整
* 寫一種版本 多種裝置使用
## Material Design
* 由 google 提出
* https://materializecss.com/
## Grid
* 可以自定義 RWD 的 Grid
* s12 ->「小」網頁的時候會占 12 格
* m6 -> 「中」網頁的時候會店 6 格
```htmlmixed=
<div class="row">
<div class="col s1">1</div>
<div class="col s1">2</div>
<div class="col s12 m6">3</div>
</div>
```
## Card
```htmlmixed=
<div class="row">
<div class="col s12 m4">
<div class="card">
<div class="card-image">
<img src="img/dog1.jpg">
<span class="card-title">Card Title</span>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
<div class="card-action">
<a href="#">This is a link</a>
</div>
</div>
</div>
</div>
```
* 結果
## Color
* 可以隨著網站風格不同
* 把網站換成不同顏色
```htmlmixed=
<nav>
<div class="nav-wrapper blue darken-1"> <!-- 在後面后上顏色的名稱 -->
<a href="#!" class="brand-logo center">Logo</a>
<ul class="left hide-on-med-and-down">
<li><a href="sass.html">Sass</a></li>
<li><a href="badges.html">Components</a></li>
<li class="active"><a href="collapsible.html">JavaScript</a></li>
</ul>
</div>
</nav>
```
## 使用 javascript 來一口氣放三張圖片
```htmlmixed=
<script>
for (var i = 0; i < 3; i++) {
document.getElementById("demo").innerHTML += '<div class="col s12 m3"> <div class="card"> <div class="card-image"> <img src="img/dog1.jpg"> <span class="card-title">Card Title</span> </div> <div class="card-content"> <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p> </div> <div class="card-action"> <a href="#">This is a link</a> </div> </div> </div>'
}
</script>
<script type="text/javascript" src="js/materialize.min.js"></script>
```
* 稍微修改一下可以放三種不同的圖片
* 使用 array 去存 三個圖片的位置
```htmlmixed=
<script>
var imgs = ["dog1", "dog2", "dog3"]
for (var i = 0; i < 3; i++) {
document.getElementById("demo").innerHTML += '<div class="col s12 m3"> <div class="card"> <div class="card-image"> <img src="img/' + imgs[i] + '.jpg"> <span class="card-title">Card Title</span> </div> <div class="card-content"> <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p> </div> <div class="card-action"> <a href="#">This is a link</a> </div> </div> </div>'
}
</script>
```
Day 6 10/30
===
## tabletop.js
* 使用 google 計算表來帢做
* 設成公開到網路上面
* 複製網址到 code 中
## callback
* 因為我們要呼叫的程式不知道什麼時候會跟 google 要到資料
* 所以有一個方法叫做 callback
* 這樣就可以一直等到 google 有回應後再回傳給程式端
* windows.enentlistener
## 取得 tabletop 中的資料
* tabletop 把 google 試算表中的資料看成是一堆的陣列
* 並且回傳名稱為 data
* 像剛剛的例子中
* data[0] 就是指第一行的資料
* data[0].name => 「張三」
* data[1].order => 「2」
```htmlmixed=
<head>
<script type='text/javascript'>
function init() {
Tabletop.init( { key: publicSpreadsheetUrl,
callback: showInfo,
simpleSheet: true } )
}
function showInfo(data, tabletop) {
// alert('Successfully processed!')
console.log(data);
var str = "";
for (var i=0; i<data.length; i++) {
// 於Google Spreadsheet建立的範例資料A欄命名為name、B欄命名為telephone、c欄命名為lunchbox、d欄命名為order
str += data[i].name + "(" + data[i].telephone + ")" + " 訂 " + data[i].lunchbox + " : " + data[i].order + "個 <br />";
}
document.getElementById("demo").innerHTML = str;
}
window.addEventListener('DOMContentLoaded', init)
</script>
<head>
```
## 使用 google 表單來填寫資料
* google 表單可以把一些欄位的回答匯出到 google 試算表中
* 也就是說我可以用之前的方法來存到別人表單中填寫的問題
* 記得要先把表單跟試算表做連結
* 現在我們有一個表單中的資料
* 我們可以在試算表中看到別人的回應了
Day 7 11/20
===
## 痞客幫 API
* 我們可以從網路上面找到已經有其他人寫好的 API 可以直接去使用它
* 下面是 痞客邦 API 的 Manual
* https://developer.pixnet.pro/#!/doc/pixnetApi/mainpageBlogCategories
## json
* 我們去 call 這個網址後
* 會得到一坨 json 格式的資料
* https://emma.pixnet.cc/mainpage/blog/categories/hot/23?page=1&per_page=10&api_version=2&format=json
* 再去 online json parser 整理一下可以看到這個
## httpRequest
* http Request 是一個可以透過網址來進行操作的一個方法
* 一共有四種操作
* GET POST ...
* 我們可以利用 httpRequest 來把剛剛的 API 中的 json 檔存取進來
* 再利用 javascript 中讀 json 檔的方法把我們想要的檔案拿出來
* myArr[i]./<json/>
```javascript=
<div id="id01"></div>
<script>
var xmlhttp = new XMLHttpRequest();
var url = "myTutorials.txt";
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myArr = JSON.parse(this.responseText);
myFunction(myArr);
}
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
function myFunction(arr) {
var out = "";
var i;
for(i = 0; i < arr.length; i++) { // 存取 json 的地方
out += '<a href="' + arr[i].url + '">' +
arr[i].display + '</a><br>';
}
document.getElementById("id01").innerHTML = out;
}
</script>
```
## Call Api
* 下面是 call 痞客幫出來的結果
```javascript=
<!DOCTYPE html>
<html>
<head>
<script>
var xmlhttp = new XMLHttpRequest();
var url = "https://emma.pixnet.cc/mainpage/blog/categories/hot/23?page=1&per_page=10&api_version=2&format=json";
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var myArr = JSON.parse(xmlhttp.responseText);
myFunction(myArr);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
function myFunction(arr) {
var data = arr.articles;
var out = "";
var i;
for (i = 0; i < data.length; i++) {
if ( data[i].title != "" ) out += '<p><a href="' + data[i].link + '" target="_blank">' + data[i].title + '</a></p>';
out += '<p> </p>';
if ( data[i].tags.length != 0 )
{
out += '<p>Tags: ';
for (j = 0; j < data[i].tags.length; j++) {
out += data[i].tags[j].tag + ', ';
}
out += '</p>';
}
out += '<br /><br /><br />';
}
document.getElementById("pixnet-stuff").innerHTML = out;
}
</script>
</head>
<body>
<div id="pixnet-stuff">
</div>
</body>
</html>
```
## call 熱門文章 Api
* Api 網址
* https://emma.pixnet.cc/mainpage/blog/categories/hot/28?page=1&per_page=10&api_version=2&format=json
```javascript=
<!DOCTYPE html>
<html>
<head>
<script>
var xmlhttp = new XMLHttpRequest();
var url = "https://emma.pixnet.cc/mainpage/blog/categories/hot/28?page=1&per_page=10&api_version=2&format=json";
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var myArr = JSON.parse(xmlhttp.responseText);
myFunction(myArr);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
function myFunction(arr) {
var data = arr.articles;
var out = "";
var i;
for (i = 0; i < data.length; i++) {
if ( data[i].thumb != "" ) out += '<img src="' + data[i].thumb + '" />';
if ( data[i].title != "" ) out += '<p><a href="' + data[i].link + '" target="_blank">' + data[i].title + '</a></p>';
if ( data[i].address != undefined ) out += '<p><a href="https://www.google.com.tw/maps?daddr=' + data[i].address + '" target="_blank">' + data[i].address + '</a></p>';
out += '<p> </p>';
out += '<br /><br /><br />';
}
document.getElementById("pixnet-stuff").innerHTML = out;
}
</script>
</head>
<body>
<div id="pixnet-stuff">
</div>
</body>
</html>
```
Day 8 11/27
===
- simple map
```javascript=
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Display a map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; };
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbnl1eWkiLCJhIjoiY2l1ZWoxemx6MDAweTJ5cHI3NHNnajR2NiJ9.cNpWK-0HoYbcumuQ8yvbjQ';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v11', // stylesheet location
center: [-74.50, 40], // starting position [lng, lat]
zoom: 9 // starting zoom
});
</script>
</body>
</html>
```
- marker
```javascript=
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Create a draggable Marker</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.5.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; };
</style>
</head>
<body>
<style>
.coordinates {
background: rgba(0,0,0,0.5);
color: red;
position: absolute;
bottom: 40px;
left: 10px;
padding:5px 10px;
margin: 0;
font-size: 11px;
line-height: 18px;
border-radius: 3px;
display: none;
}
</style>
<div id='map'></div>
<pre id='coordinates' class='coordinates'></pre>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiY2hlbnl1eWkiLCJhIjoiY2l1ZWoxemx6MDAweTJ5cHI3NHNnajR2NiJ9.cNpWK-0HoYbcumuQ8yvbjQ';
var coordinates = document.getElementById('coordinates');
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [120.675326, 24.123552],
zoom: 15
});
var marker = new mapboxgl.Marker({
draggable: true
})
.setLngLat([120.6741373,24.121052])
.addTo(map);
function onDragEnd() {
var lngLat = marker.getLngLat();
coordinates.style.display = 'block';
coordinates.innerHTML = 'Longitude: ' + lngLat.lng + '<br />Latitude: ' + lngLat.lat;
}
marker.on('dragend', onDragEnd);
</script>
</body>
</html>
```
Day 9 12/4
===
## Google Map API
* Google Map 導航功能網址
* 如果要做導航功能的話只需要知道起點及終點座就可以囉
* API 如下面的例子
* http://maps.google.com.tw/maps?saddr=起點經緯度座標或地址&daddr=終點經緯度座標或地址
* 加了一點點的網頁
```htmlmixed=
<head>
<body>
<a href="http://maps.google.com.tw/maps?saddr=24.121308,120.677175&daddr=24.118733,120.672583" target="_blank"><span style="color: blue;">導航！</span></a>
</body>
</head>
```
* 再加了一點點的前端傳參數(傳終點座標)
```htmlmixed=
<head>
<body>
<a href="http://maps.google.com.tw/maps?saddr=24.121308,120.677175&daddr=24.118733,120.672583" target="_blank"><span style="color: blue;">導航！</span></a>
<div id="demo">
</div>
<script type="text/javascript">
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 a = "24.121308,120.677175"
var b = decodeURIComponent(GetUrlVar('xxx'))
var s = '<a href="http://maps.google.com.tw/maps?saddr=' + a + '&daddr=' + b + '" target="_blank"><span style="color: blue;">導航！</span></a>'
document.getElementById("demo").innerHTML = s
</script>
</body>
</head>
```
## 起點位置改用手機定位位置
* 我們平常常說的 GPS 其實不太正確
* 正常手機上日使用的是「基地台定位」
* 在 html 上取得位置的方法
```htmlmixed=
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
```
# Final Project
> Time: 12/25 ~
- 主題、內容完整
- 版面漂亮
- CSS
- 技術面要盡量涵蓋之前教的所有東西
Sign in with Wallet
Connect another wallet