復(fù)習(xí)：

HTML5新特性： 優(yōu)先級(jí)

(1)新的標(biāo)簽和屬性 10

(2)表單新特性 7

(3)視頻和音頻 9

(4)Canvas繪圖——位圖 10

(5)SVG繪圖——矢量圖 10

svg、rect、circle、ellipse、line、polyline、polygon、text、image、path

(6)地理定位 2

(7)拖放API 5

(8)WebWorker 4

(9)WebStorage 10

(10)WebSocket 3

今日目標(biāo)：

(1)地理定位 —— 了解

(2)拖放API —— 稍難&掌握

1.補(bǔ)充：第三方繪圖工具庫(kù)的使用——Two.js

(1)找到網(wǎng)址，看官方的定義

https://two.js.org/

Two.js is a two-dimensional drawing api geared towards modern web browsers. It is renderer agnostic enabling the same api to draw in multiple contexts: svg, canvas, and webgl.

是一個(gè)2D繪圖函數(shù)庫(kù)，用于瀏覽器，底層可以是SVG、Canvas或WebGL。

(2)找示例程序，寫出demo

(3)使用API Document，編寫自己的應(yīng)用

上述代碼完成則“獲得工作”！

2.HTML5新特性之六 —— 地理定位

Geolocation：用于獲得當(dāng)前瀏覽器所在的地理坐標(biāo)，從而提供LBS（Location Based Service），如送餐、打車、導(dǎo)航。包括如下數(shù)據(jù)：

經(jīng)度： longitude

緯度： latitude

海拔高度： altitude

速度： speed

瀏覽器如何獲得上述數(shù)據(jù)：

(1)手機(jī)瀏覽器：

首先嘗試使用內(nèi)置GPS數(shù)據(jù)——精度以米為單位

再則使用手機(jī)基站編號(hào)反向推導(dǎo)出對(duì)應(yīng)的地理位置——定位精度以公里為單位

(2)PC瀏覽器：

通過電腦的IP地址反向查詢——精度以公里為單位

HTML5中如何獲取瀏覽器所在的地理定位信息：

window.navigator.geolocation {

getCurrentPosition: fn //獲取當(dāng)前定位數(shù)據(jù)

watchPosition: fn //監(jiān)視定位數(shù)據(jù)

clearWatch: fn //清除定位監(jiān)視

}

演示：如何獲取當(dāng)前的定位信息：

navigator.geolocation.getCurrentPosotion(

function(pos){

console.log('定位數(shù)據(jù)獲取成功');

//pos.coords.longtitude ....

},

function(err){

console.log('定位數(shù)據(jù)獲取失敗');

//err.code err.message

}

)

2.課外擴(kuò)展：使用百度地圖API——第三方地圖的使用

(1)打開網(wǎng)址，找定義，功能說明

http://lbsyun.baidu.com/

可以基于百度地圖進(jìn)行Android、iOS、Web應(yīng)用開發(fā)

http://lbsyun.baidu.com/index.php?title=jspopular

(2)找示例程序

(3)找API文檔，編寫自己的應(yīng)用

使用百度地圖API步驟：

(1)注冊(cè)百度開發(fā)者賬號(hào)

(2)使用開發(fā)者賬號(hào)申請(qǐng)創(chuàng)建一個(gè)Web應(yīng)用賬號(hào)，獲取一個(gè)訪問百度地圖的密鑰（AccessKey）

http://lbsyun.baidu.com/apiconsole/key

(3)編寫HTML網(wǎng)頁，出示當(dāng)前網(wǎng)站的訪問密鑰，調(diào)用百度地圖API

<script src="http://api.map.baidu.com/api?v=2.0&ak=您的網(wǎng)站在百度地圖申請(qǐng)的訪問秘鑰 "

</script

//創(chuàng)建地圖實(shí)例

var map = new BMap.Map("container");

//創(chuàng)建一個(gè)指定的點(diǎn) —— 文博大廈

var p = new BMap.Point(116.300982,39.915907);

//以指定點(diǎn)為中心顯示地圖

map.centerAndZoom(p, 17);

4.HTML5新特性之七 —— 拖放API —— 稍難&掌握

Drag：拖動(dòng)

Drop：釋放

在HTML5之前只能使用鼠標(biāo)事件模擬出“拖放”效果；HTML5專門為拖放提供了7個(gè)事件句柄。

被拖動(dòng)的源對(duì)象可以觸發(fā)的事件：

(1)ondragstart：源對(duì)象開始被拖動(dòng)

(2)ondrag：源對(duì)象被拖動(dòng)過程中(鼠標(biāo)可能在移動(dòng)也可能未移動(dòng))

(3)ondragend：源對(duì)象被拖動(dòng)結(jié)束

拖動(dòng)源對(duì)象可以進(jìn)入到上方的目標(biāo)對(duì)象可以觸發(fā)的事件：

(1)ondragenter：目標(biāo)對(duì)象被源對(duì)象拖動(dòng)著進(jìn)入

(2)ondragover：目標(biāo)對(duì)象被源對(duì)象拖動(dòng)著懸停在上方

(3)ondragleave：源對(duì)象拖動(dòng)著離開了目標(biāo)對(duì)象

(4)ondrop：源對(duì)象拖動(dòng)著在目標(biāo)對(duì)象上方釋放/松手

注意：必須組織dragover事件的默認(rèn)行為，才可能觸發(fā)drop事件！

練習(xí)：

(1)實(shí)現(xiàn)一個(gè)可以隨著鼠標(biāo)拖動(dòng)而移動(dòng)的小飛機(jī)

提示：飛機(jī)必須絕對(duì)定位；ondrag事件處理中獲取事件發(fā)生的坐標(biāo)值。

(2)拖動(dòng)著某個(gè)小飛機(jī)到垃圾桶上方時(shí)，垃圾桶由半透明變?yōu)椴煌该鳎划?dāng)拖動(dòng)著離開 或 在上方釋放 垃圾桶又變?yōu)榘胪该鳎?/p>

(3)總共顯示三個(gè)小飛機(jī)，拖動(dòng)著某個(gè)小飛機(jī)到垃圾桶上方后，小飛機(jī)從DOM樹上刪除

5.如何在拖動(dòng)的源對(duì)象事件和目標(biāo)對(duì)象事件間傳遞數(shù)據(jù)

HTML5為所有的拖動(dòng)相關(guān)事件提供了一個(gè)新的屬性：

e.dataTransfer { //數(shù)據(jù)傳遞對(duì)象——作用相當(dāng)于拖拉機(jī)

}

用于在源對(duì)象和目標(biāo)對(duì)象的事件間傳遞數(shù)據(jù)，

源對(duì)象上的事件處理中保存數(shù)據(jù)：

e.dataTransfer.setData( k, v ); //k-v必須都是string

目標(biāo)對(duì)象上的事件處理中讀取數(shù)據(jù)：

var v = e.dataTransfer.getData( k );

課后練習(xí)： 英雄選擇

要求：

拖動(dòng)某架飛機(jī)到目標(biāo)區(qū)域，則在上方顯示出該飛機(jī)；下方該飛機(jī)圖消失；替換選中區(qū)域已有的飛機(jī)。

拖動(dòng)另一架飛機(jī)到目標(biāo)區(qū)域，則顯示出該飛機(jī)，之前選中的飛機(jī)變?yōu)橹匦禄氐酱x區(qū)域。

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。