H5小內容(五)

 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

相關文章
相關標籤/搜索