【重溫基礎】17.WebAPI介紹

pingan8787發表於2019-02-16

WebAPI

本文是 重溫基礎 系列文章的第十七篇。
今日感受：挑戰。

系列目錄：

本章節複習的是JS中的關於WebAPI相關知識，介紹的API比較多。

前置知識：
需要了解 JS 物件的相關知識。

1.WebAPI介紹

API：應用程式介面，是基於程式語言構建的結構，使開發人員更容易地建立複雜的功能。它們抽象了複雜的程式碼，並提供一些簡單的介面規則直接使用。

客戶端JavaScript提供很多可用的API，他們本身不是JavaScript語言的一部分，卻建立在JavaScript語言核心的頂部，為使用JavaScript程式碼提供額外的超強能力。他們通常分為兩類：

瀏覽器API：

內建於Web瀏覽器，可以從瀏覽器和電腦周圍環境獲取資料，並用於複雜的操作。例如Geolocation API提供了一些簡單的JavaScript結構來獲取位置資料，這種API通常抽象很多複雜邏輯，我們只要呼叫API即可。

第三方API：

預設情況下不會內建於瀏覽器，而必須在Wen中某個地方獲取程式碼和資訊，例如Twitter API可以推送最新推文給我們，它提供一系列第三方API讓我們獲取Twitter的服務和資訊。

1.1 API如何工作

那麼，這些API是如何工作的？
不同的JavaScript的API工作內容不同，但具有以下幾個相同點：

都是基於物件

API通過使用一個或多個JavaScript物件與我們的程式碼互動，這些物件作為API使用的資料（包含在物件屬性中）的容器，和API提供的功能（包含在物件的方法中）。
如Geolocation API則是由以下幾個物件組成：

Geolocation, 包含三種控制地理資料檢索的方法。
Position, 表示在給定的時間的相關裝置的位置。它包含一個當前位置的Coordinates 物件。還包含了一個時間戳,這個時間戳表示獲取到位置的時間。
Coordinates,包含有關裝置位置的大量有用資料，包括經緯度，高度，運動速度和運動方向等。

通常這麼使用：

navigator.geolocation.getCurrentPosition(function(options){
    // ... do something
});

都有可識別的入口點

即API的入口位置，如Geolocation API的入口在Navigator.geolocation 屬性, 它返回瀏覽器的 Geolocation 物件，所有有用的地理定位方法都可用。
在文件物件模型(DOM)的API入口位置更簡單，常常都掛載在Document物件上，或者HTML元素上：

let a = document.createElement(`div`);// 建立一個新的div元素
let b = document.querySelector(`div`);// 獲取一個已經存在的div元素
a.textContent = "hi leo!";  // 給a元素設定文字
b.appendChild(a);           // 將a元素新增到b元素下
// <div>hi leo!</div>

詳細的後面介紹。

都使用事件來處理狀態的變化

有些特定的API會包含一些事件，當事件觸發，我們便可以執行函式的處理屬性，做一些不同的操作。例如XMLHttpRequest物件的例項，有很多的事件可以呼叫。

// 簡單寫
const url = "https://www.baidu.com";
const req = new XMLHttpRequest();
req.open(`GET`, url);
req.responseType = "json";
req.send();
req.onload = function(){
    // ... do something
}

都會在適當位置提供額外的安全機制

主要還是處於安全考慮，提供額外的安全機制，比如常見同源策略，一些特定頁面只能在https協議的網頁工作等。

接下來看看這些API都能實現什麼作用。

2.文件API

我們在開發web頁面和應用時，就會經常操作頁面文件的結構，這裡就會大量用到document物件，控制HTML和樣式資訊的文件物件模型（DOM）。
下面貼一張web頁面檢視中的瀏覽器的主要部分（來源MDN）：

介紹：

window：是載入瀏覽器的標籤，JavaScript中用Window物件表示，可以實現很多操作：獲取視窗大小，操作載入視窗的文件，儲存文件資料等。
navigator：瀏覽器存在web上的狀態和表示（即使用者代理），JavaScript中用Navigator物件表示，用於獲取物件的一些資訊，如：攝像頭的地理資訊，使用者偏愛的語言等。
document：是實際載入視窗的頁面，JavaScript中用Document物件表示，可以實現很多文件操作：獲取DOM元素，修改文字內容，設定新樣式等。

2.1 文件物件模型(DOM)

在瀏覽器標籤中當前載入的文件用文件物件模型(Document Object Model，簡稱DOM)表示。
這是一個由瀏覽器生成的“樹結構”，使得程式語言可以很容易訪問HTML結構，操作等。

下面是基本的DOM操作：

let a = document.createElement(`a`);// 1. 建立一個新的a元素
let b = document.querySelector(`a`);// 2. 獲取一個已經存在的a元素
a.textContent = "進入pingan8787部落格";  // 3. 給a元素設定文字
a.href = "http://www.pingan8787.com"; // 4. 給a元素新增跳轉地址
a.style.color = "red";                // 5. 給a元素新增樣式
a.style.backgroundColor = "black";
a.setAttribute("my_class");    // 6. 給a元素新增class類名
b.appendChild(a);              // 7. 將a元素新增到b元素下

這麼一個簡單的例子，實際可以看出DOM提供的方法很多，下面分類介紹下這些方法：

DOM HTML操作

改變HTML輸出流：

通過document.write()直接修改HTML輸出流寫內容。

document.write("hello leo");

注意：千萬不要在文件載入之後使用，否則覆蓋文件。

改變HTML內容：

通過innerHTML屬性來改變HTML元素的內容：

document.getElementById(id).innerHTML = new HTML;
// 通過ID獲取  （getElementById）
// 通過name屬性（getElementsByName）
// 通過標籤名  （getElementsByTagName）
// 通過類名    （getElementsByClassName）
// 獲取html的方法 （document.documentElement）
// 獲取body的方法 （document.body）
// 通過選擇器獲取一個元素（querySelector）
// 通過選擇器獲取一組元素（querySelectorAll）

例子：

document.getElementById("id1").innerHTML = "hello leo!"

改變HTML屬性：

通過attribute屬性來改變元素的屬性：

document.getElementById(id).attribute = new value

例子：

<img id = "id1" src ="a.jpg">

document.getElementById("id1").src = "leo.png";

詳細的文件可以檢視HTML DOM Document 物件

DOM CSS操作

改變HTML樣式

通過style.styleName屬性修改元素的樣式：

document.getElementById(id).style.property = new style;

例子：

document.getElementById("id1").style.color = "red";
document.getElementById("id1").style.backgroundColor = "green";

注意：style後面的樣式的屬性名只能使用命名小駝峰。

DOM 事件操作

如要對元素做點選事件的繫結，可以在HTML的onclick事件屬性上繫結方法：

<div onclick="fun()"></div>
<div onclick="fun(prams)"></div>

另外可以繫結的事件型別還有很多：

<div onload="fun()"></div>
<div onchange="fun()"></div>
<div onmouseover="fun()"></div>
<div onmousedown="fun()"></div>

詳細的文件可以檢視HTML DOM Event 物件

DOM 節點操作

建立新的HTML元素

需要先建立一個新元素節點，然後在使用appendChild方法，向一個已存在的元素上追加這個新元素：

<div id = "id1"></div>

// 建立新元素節點
let a = document.createElement(`p`);
let b = document.createTextNode(`新的文字`);
a.appendChild(b);

// 獲取已存在元素
let div = document.getElementById(`id1`);

// 追加新元素
div.appendChild(a);

刪除已有的HTML元素

如果需要刪除HTML元素，就必須先獲得該元素的父元素，再使用removeChild方法刪除：

<div id = "id1">
    <p id = "id2">hello leo</p>
</div>

let a = document.getElementById("id1");
let b = document.getElementById("id2");
a.removeChild(b);

2.2 Window物件

Window 物件表示瀏覽器中開啟的視窗。
Window 物件涉及到的屬性和方法非常多，具體可以檢視 Window 物件比較詳細。
這裡一個簡單的例子，實現獲取視窗（顯示文件的內部視窗）的寬高，並設定給指定的Div元素，並且當我們調整視窗時候，也會及時改變Div的寬高。

let div = document.querySelector(`div`);
// 獲取寬高
let w = window.innerWidth;
let h = window.innerHeight;
// 設定寬高
div.style.width = w + `px`;
div.style.heitgh = h + `px`;
// 設定及時調整div寬高
window.onresize = function(){
    w = window.innerWidth;
    h = window.innerHeight;
    div.style.width = w + `px`;
    div.style.heitgh = h + `px`;
}

3.獲取伺服器資料API

這一部分主要複習Ajax（全稱：Asynchronous JavaScript and XML）。
Ajax主要要解決的問題是：避免重複載入重新整理整個頁面，因為有時候我們只是小部分資料更新，這時候我們這要重新整理這部分的資料，而不是整個頁面。
Ajax不是新的程式語言，而是一種使用現有標準的新方法。

下面看一下Ajax模型圖：
Ajax模型

Ajax模型包括使用Web API作為代理來更智慧地請求資料，而不僅僅是讓瀏覽器重新載入整個頁面。讓我們來思考這個意義：
比如：我們逛淘寶，搜尋或開啟商品頁面時，頂部導航來和頁首頁尾等，都保持不變。
這樣做的好處：

頁面更新更快，減少等待重新整理，體驗更好，響應更快。
下載的資料更少，減少頻寬的浪費。

另外為了提高載入速度，網站有時候也會將首次請求和資料儲存在使用者計算機中，下次再請求就直接先使用本地版本，如果內容有更新才會去伺服器獲取新資料，原理圖：
儲存和獲取新資料

3.1 Ajax基礎使用

XMLHttpRequest 是 AJAX 的基礎。
所有現代瀏覽器均支援 XMLHttpRequest 物件（IE5 和 IE6 使用 ActiveXObject）。

建立 XMLHttpRequest 物件的語法：

variable=new XMLHttpRequest();
// IE5 和 IE使用 ActiveX 物件：
variable=new ActiveXObject("Microsoft.XMLHTTP");

為了相容所有瀏覽器（包括IE5 IE6），我們就必須檢查瀏覽器是否支援XMLHttpRequest物件，若支援則建立XMLHttpRequest物件，否則建立ActiveXObject物件。

let my_http;
if (window.XMLHttpRequest){
    // 非 ES5 ES6
    my_http=new XMLHttpRequest();
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        // 網路請求成功後，執行的操作
    }
  }
}else{
    // ES5 ES6
    my_http=new ActiveXObject("Microsoft.XMLHTTP");
}

3.2 Ajax傳送請求

向伺服器傳送請求時，我們可以使用 XMLHttpRequest 物件的 open() 和 send() 方法：

my_http.open(method,url,async);  
my_http.send(string);

引數解釋：
open(method,url,async)方法接收三個引數：

method：請求的型別；GET 或 POST。
url：檔案在伺服器上的位置。
async：true（非同步）或 false（同步）。

send(string)方法接收一個引數：

string：僅用於 POST 請求。

例子：

// GET
my_http.open("GET","http://www.baidu.com",true);
my_http.send();

// POST
my_http.open("POST","http://www.baidu.com",true);
my_http.setRequestHeader(
    "Content-type",
    "application/x-www-form-urlencoded"
);  // 新增 HTTP 頭
my_http.send("name=leo");

如果POST請求的話需要設定HTTP頭：

setRequestHeader(header,value)

引數解釋：
setRequestHeader(header,value)方法接收兩個引數：

header: 規定頭的名稱。
value: 規定頭的值。

3.3 Ajax伺服器響應

接收伺服器響應，我們可以使用 XMLHttpRequest 物件的 responseText 或 responseXML 屬性。

responseText：獲得字串形式的響應資料。
responseXML：獲得 XML 形式的響應資料。
responseText屬性

當服務端的響應不是XML，使用responseText屬性。
若是字串的響應就可以直接使用。

document.getElementById("id1").inndeHTML = my_http.responseText;

3.4 Ajax readyState

readyState儲存著XMLHttpRequest物件的狀態。
我們傳送Ajax請求的整個過程中，XMLHttpRequest物件的readyState會改變，當readyState改變的時候會觸發onreadystatechange事件。

XMLHttpRequest物件的三個重要屬性：

屬性	描述
onreadystatechange	儲存函式（或函式名），每當 `readyState` 屬性改變時，就會呼叫該函式。
readyState	存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。0（請求未初始化），1（伺服器連線已建立），2（請求已接收），3（請求處理中），4（請求已完成，且響應已就緒）
status	200（”OK”），404（未找到頁面）

通常我們會在readyState等於4且status等於200時候表示響應已就緒，可以執行業務操作：

if (xmlhttp.readyState==4 && xmlhttp.status==200){
    // 網路請求成功後，執行的操作
}

4.圖形繪製API

這裡主要介紹的是HTML5新增的canvas元素，JavaScript為canvas新增了很多API，進一步增強canvas。
canvas 元素可以通過JavaScript指令碼，在網頁上繪製圖形。
比如,它可以被用來繪製圖形,製作圖片集合,甚至用來實現動畫效果。你可以(也應該)在元素標籤內寫入可提供替代的的程式碼內容，這些內容將會在在舊的、不支援canvas元素的瀏覽器或是禁用了JavaScript的瀏覽器內渲染並展現。

詳細完整的課程推薦：

下面複習一下canvas的一個使用流程：

4.1 簡單繪製

建立畫布，規定元素id、寬度和高度

要在網頁中建立 2D 或者 3D 場景，必須在 HTML 檔案中插入一個canvas元素，以界定網頁中的繪圖區域。

<canvas id="id1" width="200" height="100">
    臥槽你的瀏覽器竟然不支援 canvas！
</canvas>

在canvas標籤內，寫一些瀏覽器不支援畫布功能時候的提示內容。
畫布預設尺寸為 300 × 150 畫素。

獲取畫布上下文，並完成設定

我們需要獲得一個對繪畫區域的特殊的引用（稱為“上下文”）用來在畫布上繪圖。可通過 HTMLCanvasElement.getContext() 方法獲得基礎的繪畫功能，需要提供一個字串引數來表示所需上下文的型別。
下面建立一個2d畫布：

let ctx = canvas.getContext("2d");

ctx 變數包含一個 CanvasRenderingContext2D 物件，畫布上所有繪畫操作都會涉及到這個物件。
下面將畫布背景塗黑：

ctx.fillStyle = `rgb(0, 0, 0)`;
ctx.fillRect(0, 0, 200, 100);

4.2 繪製基礎

首先需要知道一些2D畫布的知識，畫布左上角的座標是(0, 0)，橫座標（x）軸向右延伸，縱座標（y）軸向下延伸。

繪製實線

ctx.lineTo(100,50);  // 繪製目標座標
ctx.lineWidth = 5;   // 線條寬度
ctx.stroke();  // 繪製實線

繪製矩形

fillRect(x, y, width, height) 繪製一個填充的矩形
strokeRect(x, y, width, height) 繪製一個矩形的邊框
clearRect(x, y, width, height) 清除指定矩形區域，讓清除部分完全透明。
x與y指定了在canvas畫布上所繪製的矩形的左上角（相對於原點）的座標。
width和height設定矩形的尺寸。

// 實心矩形
ctx.fillStyle = `rgb(255, 0, 0)`; // 矩形顏色
ctx.fillRect(50, 50, 100, 150);   // 矩形起止座標

// 空心矩形
ctx.strokeStyle = `rgb(255, 255, 255)`;// 矩形邊框顏色
ctx.strokeRect(25, 25, 175, 200);// 矩形起止座標

繪製路徑

可以通過路徑來實現複雜的圖形，下面整理了一些常用到的方法：

beginPath()：在畫筆當前所在位置開始繪製一條路徑。在新的畫布中，畫筆起始位置為 (0, 0)。
moveTo()：將畫筆移動至另一個座標點，不記錄、不留痕跡，只將畫筆“跳”至新位置。
fill()：通過為當前所繪製路徑的區域填充顏色來繪製一個新的填充形狀。
stroke()：通過為當前繪製路徑的區域描邊，來繪製一個只有邊框的形狀。
路徑也可和矩形一樣使用 lineWidth 和 fillStyle / strokeStyle 等功能。

ctx.fillStyle = `rgb(255, 0, 0)`; // 設定填充顏色
ctx.beginPath();      // 開始
ctx.moveTo(50, 50);   // 移動到結束點的座標
// .. 可以在到處移動
ctx.fill();           // 繪製

繪製圓形

arc(x, y, radius, startAngle, endAngle, anticlockwise)
畫一個以（x,y）為圓心的以radius為半徑的圓弧（圓），從startAngle開始到endAngle結束，按照anticlockwise給定的方向（預設為順時針）來生成。
arcTo(x1, y1, x2, y2, radius)
根據給定的控制點和半徑畫一段圓弧，再以直線連線兩個控制點。

arc方法，該方法有六個引數：

x,y為繪製圓弧所在圓上的圓心座標。
radius為半徑。
startAngle以及endAngle引數用弧度定義了開始以及結束的弧度。
anticlockwise是布林值，為true時，是逆時針方向，否則順時針方向。

這些都是以x軸為基準。

注意：arc()函式中表示角的單位是弧度，不是角度。角度與弧度的js表示式:
弧度=(Math.PI/180)*角度。

cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

繪製文字

fillText(text, x, y [, maxWidth])
在指定的(x,y)位置填充指定的文字，繪製的最大寬度是可選的.
strokeText(text, x, y [, maxWidth])
在指定的(x,y)位置繪製文字邊框，繪製的最大寬度是可選的.

ctx.strokeStyle = `white`;
ctx.lineWidth = 1;
ctx.font = `36px arial`;
ctx.strokeText(`hello leo !`, 50, 50);

ctx.fillStyle = `red`;
ctx.font = `48px georgia`;
ctx.fillText(`hello leo !`, 50, 150);

另外還有一些有樣式的文字，可以使用這些屬性：

font = value

當前繪製的文字字型.預設是 10px sans-serif。

textAlign = value

文字對齊選項. 可選的值包括：start, end, left, right or center. 預設值是 start。

textBaseline = value

基線對齊選項. 可選的值包括：top, hanging, middle, alphabetic, ideographic, bottom。預設值是 alphabetic。

direction = value

文字方向。可能的值包括：ltr, rtl, inherit。預設值是 inherit。

ctx.font = "48px serif";
ctx.textBaseline = "hanging";
ctx.strokeText("Hello leo ", 0, 100);

繪製圖片

drawImage(image, x, y)

其中 image 是 image 或者 canvas 物件，x 和 y 是其在目標 canvas 裡的起始座標。

let img = new Image();
img.src = "leo.png";
img.onload = function(){
    ctx.drawImage(img, 50, 50);
};

drawImage方法還有更多引數：

ctx.drawImage(image, 20, 20, 185, 175, 50, 50, 185, 175);

第一個引數不變，為圖片引用。
引數 2、3 表示裁切部分左上頂點的座標，參考原點為原圖片本身左上角的座標。原圖片在該座標左、上的部分均不會繪製出來。
引數 4、5 表示裁切部分的長、寬。
引數 6、7 表示裁切部分左上頂點在畫布中的位置座標，參考原點為畫布左上頂點。
引數 8、9 表示裁切部分在畫布中繪製的長、寬。本例中繪製時與裁切時面積相同，你也可以定製繪製的尺寸。

詳細完整的課程推薦：

5.視訊音訊API

HTML5提供了用於文件中嵌入富媒體的元素<video>和<audio>標籤，通過元素自帶的API來控制視訊和音訊的播放搜尋等。

<video>
  <source src="1.mp4" type="video/mp4">
  <source src="2.webm" type="video/webm">
  <a href="3.mp4">開啟mp4</a> 
</video>

5.1 視訊

當前，video 元素支援三種視訊格式：Ogg/MPEG4和WebM。
簡單使用：

<video src="1.ogg" controls="controls"> </video>
<video src="1.ogg" controls="controls" width="320" height="240"> </video>

連線不同視訊：

<video width="320" height="240" controls="controls">
    <source src="1.ogg" type="video/ogg">
    <source src="2.mp4" type="video/mp4">
    您的瀏覽器不支援！
</video>

<video> 與 </video> 之間插入的內容是供不支援 video 元素的瀏覽器顯示的。
<video> 標籤的屬性：

屬性	描述
`autoplay`	視訊在就緒後馬上播放
`controls`	向使用者顯示控制元件，比如播放按鈕
`height`	設定視訊播放器的高度
`width`	設定視訊播放器的寬度
`src`	要播放的視訊的 URL
`preload`	視訊在頁面載入時進行載入，並預備播放，如果使用 “autoplay”，則忽略該屬性
`loop`	當媒介檔案完成播放後再次開始播放

另外我們可以為視訊建立簡單的播放/暫停和調整尺寸的控制元件，這裡需要使用play()和 pause() 還有兩個屬性：paused 和 width。
更多方法可以檢視 HTML5 video – 方法、屬性以及事件

5.2 音訊

audio 元素能夠播放聲音檔案或者音訊流。
當前，audio 元素支援三種視訊格式：Ogg Vorbis/MP3和Wav。
簡單使用：

<audio src="1.ogg" controls="controls"></audio>

control 屬性供新增播放、暫停和音量控制元件。
<audio> 與 </audio> 之間插入的內容是供不支援 audio 元素的瀏覽器顯示的。
連線不同音訊：

<audio controls="controls">
    <source src="1.ogg" type="audio/ogg">
    <source src="2.mp3" type="audio/mpeg">
    您的瀏覽器不支援！
</audio>

<audio> 標籤的屬性：

屬性	描述
`autoplay`	視訊在就緒後馬上播放
`controls`	向使用者顯示控制元件，比如播放按鈕
`src`	要播放的視訊的 URL
`preload`	視訊在頁面載入時進行載入，並預備播放，如果使用 “autoplay”，則忽略該屬性
`loop`	當媒介檔案完成播放後再次開始播放

6.客戶端儲存API

現代web瀏覽器會提供一些在客戶端儲存使用者資料的方法，只要使用者允許，可以隨時取出使用。
使用客戶端儲存API可以儲存的資料量是優先的，具體取決於瀏覽器或者使用者設定。
儲存的方式可以這樣分類：

傳統方法：cookies

cookie使用比較久了，過時，存在各種安全問題，而且無法儲存複雜資料，可能唯一的優勢就是對非常老舊瀏覽器支援，如果業務需要，也可以使用cookie

新流派：Web Storage 和 IndexedDB

現代瀏覽器所提供的更加簡單有效的客戶端儲存API。

未來：Cache API

一些現代瀏覽器支援新的 Cache API。這個API是為儲存特定HTTP請求的響應檔案而設計的，它對於像儲存離線網站檔案這樣的事情非常有用，這樣網站就可以在沒有網路連線的情況下使用。快取通常與 Service Worker API 組合使用，儘管不一定非要這麼做。

6.1 WebStorage

web storageAPI只需儲存簡單的 鍵/值對的資料（限制為字串、數字等型別），並在需要的時候檢索其值。
web storageAPI提供了兩種在客戶端儲存資料的新方法：

localStorage : 一直儲存資料，甚至到瀏覽器關閉又開啟後也是這樣
sessionStorage : 只要瀏覽器開著，資料就會一直儲存 (關閉瀏覽器時資料會丟失)

localStorage方法：

localStorage.setItem(key, value)：儲存一個資料。
localStorage.getItem(key)：讀取一個資料。
localStorage.removeItem(key)：刪除一個資料。

localStorage.setItem(`name`,`leo`);
let leo = localStorage.getItem(`name`);
leo ; // "leo"
localStorage.removeItem(`name`);

關閉瀏覽器以後資料還在。

sessionStorage方法：

sessionStorage.setItem(key, value)：儲存一個資料。
sessionStorage.getItem(key)：讀取一個資料。
sessionStorage.removeItem(key)：刪除一個資料。

sessionStorage.setItem(`name`,`leo`);
let leo = sessionStorage.getItem(`name`);
leo ; // "leo"
sessionStorage.removeItem(`name`);

關閉瀏覽器以後資料不在。

7.第三方API

並不是所有的API都是內建在瀏覽器中，有一些可能是其他網站（如谷歌，Facebook等）提供的API，讓開發者呼叫，從而使用他們的服務和資料等。

API通過使用一個或多個JavaScript物件與我們的程式碼互動，這些物件作為API使用的資料（包含在物件屬性中）的容器，和API提供的功能（包含在物件的方法中）。
例如我們呼叫谷歌地圖的Google Maps APIs ，需要先引入他們開放的JavaScript庫。

<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyDDuGt0E5IEGkcE6ZfrKfUtE9Ko_de66pA"></script>

然後就可以這麼使用：

navigator.geolocation.getCurrentPosition(function(options){
    // ... do something
});

如Geolocation API則是由以下幾個物件組成：

Geolocation, 包含三種控制地理資料檢索的方法。
Position, 表示在給定的時間的相關裝置的位置。它包含一個當前位置的Coordinates 物件。還包含了一個時間戳,這個時間戳表示獲取到位置的時間。
Coordinates,包含有關裝置位置的大量有用資料，包括經緯度，高度，運動速度和運動方向等。

參考文章：

本部分內容到這結束

Author	王平安
E-mail	pingan8787@qq.com
博客	www.pingan8787.com
微信	pingan8787
每日文章推薦	https://github.com/pingan8787…
JS小冊	js.pingan8787.com

歡迎關注微信公眾號【前端自習課】每天早晨，與您一起學習一篇優秀的前端技術博文 .

【重溫基礎】15.JS物件介紹
2019-01-14
JS物件
【重溫基礎】16.JSON物件介紹
2019-01-17
JSON物件
【重溫基礎】JS中的常用高階函式介紹
2019-02-16
JS函式
【重溫基礎】20.事件
2019-02-16
事件
【重溫基礎】8.字串
2018-12-22
字串
【重溫基礎】12.使用物件
2019-02-16
物件
【重溫基礎】instanceof運算子
2018-12-01
【重溫基礎】4.函式
2018-12-13
函式
【重溫基礎】19.閉包
2019-01-23
【重溫基礎】10.陣列
2018-12-24
陣列
【重溫基礎】6.數字
2018-12-19
【重溫基礎】7.時間物件
2019-02-16
物件
Redis 基礎資料型別重溫
2021-10-19
Redis資料型別
Pandas基礎介紹
2020-05-06
Elasticsearch 基礎介紹
2021-04-04
Elasticsearch
kafka 基礎介紹
2017-11-16
Kafka
kafka基礎介紹
2017-11-16
Kafka
【重溫基礎】22.記憶體管理
2019-03-01
記憶體
【重溫基礎】3.迴圈和迭代
2019-02-16
【重溫基礎】11.Map和Set物件
2019-02-16
物件
【重溫基礎】9.正規表示式
2019-02-16
【重溫基礎】21.高階函式
2019-02-16
函式
【重溫基礎】14.超程式設計
2019-01-07
程式設計
【重溫基礎】18.相等性判斷
2019-01-22
ActiveMq的基礎介紹
2020-12-14
MQ
MySQL 教程基礎介紹
2021-01-04
MySql
JDBC的基礎介紹
2020-12-03
JDBC
基礎 RAID 介紹
2015-01-29
AI
java基礎介紹（轉）
2016-01-15
Java
1、Oracle 基礎介紹
2024-04-14
Oracle
【重溫基礎】5.表示式和運算子
2019-02-16
OSPF介紹及基礎配置
2019-10-11
Django基礎教程之介紹
2021-04-05
Django
ConstraintLayout基礎介紹
2017-09-19
AI
Epub基礎知識介紹
2013-09-07
HT for Web基礎動畫介紹
2015-08-03
Web動畫
分割槽表基礎介紹
2011-06-16
【重溫基礎】13.迭代器和生成器
2019-02-16