Geolocation(地理定位) 基本內容 地理定位 - 地球的經度和緯度的相交點 實現地理定位的方式 GPS - 美國的,依靠衛星定位 北斗定位 - 純國產,慣性定位技術和衛星定位 基站定位 - 移動運營商創建基站(提供信號源) 基於互聯網 - IP地址(PC端和移動端) 目前很多瀏覽器都具有定
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等事件
註意 - 實際操作中,該方法幾乎不用
