Html5之高級-10 Geolocation(Geolocation、百度地圖API)

1、Geolocation

Geolocation API 介紹

    - Geolocation API 用於將用戶當前地理位置信息共享給信任的站點

    - Geolocation API 位於 navigator 對象中，只有3個方法

        - getCurrentPosition()

        - watchPosition()

        - clearWatch()

getCurrentPosition

    - 語法:

        - navigator.geolocation.getCurrentPosition(success_callback,error_callback,{geolocation選項})

    - 參數:

        - sucess_callback: 用於容許共享geolocation的回調

        - error_callback: 獲取地理位置失敗的回調，傳入錯誤對象，包含code,message屬性

        - 選項:

            enableHighAccuracy: 是否有更精確讀取經緯度，默認爲false

    - navigator.geolocation.getCurrentPosition(function(position){

          - position的屬性:

          - coords 

              latitude:當前位置的緯度

              longitude:當前位置的經度

              altitude: 海拔,海平面以上以米計

              speed:速度,以米/秒計

      })

2、百度地圖API

百度開發者

    - 百度地圖也提供了很是完整的地圖信息策略，而且能夠根據用戶指定的地理位置信息進行定位

    - 使用步驟:

        - 申請百度祕鑰(ak)

          http://developer.baidu.com/map/

        - 註冊成爲百度開發者

        - 再次訪問 http://developer.baidu.com/amp/

百度地圖 API

    - 使用步驟

        - 引入百度地圖 API，即導入百度地圖相關的js文件

          <script src="http://api.map.baidu.com/api?v=2.0&ak=你的ak"></script>

        - 查閱 API 文檔，完成功能

    - 構造函數: Map("containerId")

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

    - 定位顯示城市及縮放比例:

      centerAndZoom(point/cityName,level)

      map.centerAndZoom("北京市",12);

    - 啓用鼠標滾輪更改顯示比例:enableScrollWheelZoom(true)

    - 添加縮放平移空間:addControl(new BMap.NavigationControl());

    - 添加比例尺:addControl(new BMap.ScaleControl());

    - 獲取當前設備的地理位置: Geolocation對象

      var geolocation = new BMap.Geolocation();

    - 經過getCurrentPosition事件，傳遞position參數獲取當前位置

      geolocation.getCurrentPosition(function(position){})

    - getStatus()判斷獲取地理信息的狀態，狀態碼由百度地圖API提供，共有8個

    - 經過position參數獲取當前設備的地理位置

        - position.point: 表示當前地理座標對象

        - position.point.lng:當前位置的經度

        - position.point.lat:當前位置的緯度

    - Marker(point):建立覆蓋物即標點

    - map.addOverlay(marker):將覆蓋物添加到地圖上

    - map.panTo(point):將地圖中心點移動到指定點上

百度地圖地址解析

    - 經過 Geocoder 對象解析地址並獲得座標點

總結：本章內容主要介紹了下 HTML5 Geolocation(Geolocation、百度地圖API)