Geolocation(地理定位)
基本內容
地理定位 - 地球的經度和緯度的相交點
實現地理定位的方式
GPS - 美國的,依靠衛星定位
北斗定位 - 純國產,慣性定位技術和衛星定位
基站定位 - 移動運營商建立基站(提供信號源)
基於互聯網 - IP地址(PC端和移動端)
目前不少瀏覽器都具備定位功能
HTML5中地理定位
地理定位功能並非屬於HTML5專有內容
HTML5的地理定位技術,由Google公司提供的
Google Map產品
中國 - 國內不能使用Google公司全部服務和產品
百度地圖和高德地圖
百度地圖
百度地圖 - http://developer.baidu.com/map/
註冊百度開發者帳戶
http://developer.baidu.com/
條件 - 必須能鏈接互聯網
目的 - 掌握如何使用百度地圖
JS庫或百度地圖
提供的API幫助文檔
提供的Demo示例代碼
學習目的
學習的百度地圖的功能
百度地圖的使用特色
如何使用百度地圖
在HTML頁面中
引入百度地圖的JS
http://api.map.baidu.com/api?v=2.0&ak=祕鑰
定義顯示地圖的容器
<div id="" style=""></div>
在javascript代碼中
建立百度地圖Map對象
var map = new BMap.Map(容器id);
進行地圖的初始化
map.centerAndZoom();
百度地圖的組件
核心類 - Map類
構造器 - BMap.Map(容器id);
方法
centerAndZoom() - 初始化方法
addControl() - 添加控件
addOverlay() - 添加標註
Control類 - 控件類
ScaleControl類 - 表示地圖的比例尺
構造器 - 建立比例尺對象
NavigationControl類 - 表示移動縮放控件
構造器 - 建立移動縮放控件
Overlay類 - 遮蓋物類
Marker類 - 表示地圖的一個標註
構造器 - Marker(point)
Point類 - 標註類
拖放(拖拽)API
實現拖拽效果
要拖拽的文件是什麼? - 源元素
要拖拽到哪裏去? - 目標元素
目前實現拖拽效果
使用原生DOM就能實現 - 最麻煩
使用jQuery的插件 - 拖拽效果
HTML5中提供的拖拽功能
HTML5中拖拽
源元素事件
dragstart - 當鼠標開始拖放時被觸發
drag - 當鼠標拖放過程當中,相似於mousemove事件
dragend - 當鼠標結束拖放時被觸發
目標元素事件
dragenter - 當鼠標拖放進入到目標元素內被觸發
dragover - 當鼠標到達目前元素被觸發
爲該事件增長event.preventDefault();
drop - 當鼠標實現拖放效果時被觸發
默認狀況下,該事件沒有被觸發
緣由 - HTML頁面默認狀況下,不容許拖放
稱之爲HTML頁面的默認行爲
解決 - 阻止頁面的默認行爲
事件對象event.preventDefault()方法
dragleave - 當鼠標拖放離開目標元素被觸發
dataTransfer對象
做用 - 相似於window系統的剪切板的功能
功能
能夠將源元素的信息(數據),存儲在這裏
將存儲在該對象的源元素信息,提供給目標元素
方法
setData() - 設置(源元素)數據
在源元素事件中使用
getData() - 獲取設置的數據
在目標元素事件中使用
clearData() - 清除(設置的)數據
全部的數據內容,存儲在瀏覽器內存中
當使用完畢數據內容時,清除
setDragImage()方法
做用 - 修改拖放過程當中,鼠標跟隨的圖片效果
用法 - drag、dragstart等事件
注意 - 實際操做中,該方法幾乎不用javascript