H5地理定位

地理位置

if(navigator.geolocation){
        alert("您的瀏覽器支持定位！");
      }else{
        alert("請(qǐng)更新你的瀏覽器！");
      }

getCurrentPostion

if(navigator.geolocation){
        alert("您的瀏覽器支持定位！");        navigator.geolocation.getCurrentPosition(successCallback,errorCallback);
      }else{
        alert("請(qǐng)更新你的瀏覽器！");
      }
      function successCallback(result){
        //console.log(222);
        alert(parseInt(result.coords.latitude) +","+ parseInt(result.coords.longitude));
        console.log(result);
      }
      function errorCallback(error){
        //console.log(11);
        alert(error);
      }

if(navigator.geolocation){
        alert("您的瀏覽器支持定位！");        navigator.geolocation.getCurrentPosition(successCallback,errorCallback);
      }else{
        alert("請(qǐng)更新你的瀏覽器！");
      }
      function successCallback(position){
        //console.log(222);
        var coords = position.coords;
        var latitude = coords.latitude;
        var longitude = coords.longitude;
        var accuracy = coords.accuracy;
        alert(parseInt(latitude)+","+ parseInt(longitude));
        //console.log(result);
      }
      function errorCallback(error){
        //console.log(11);
        //alert(error);
        switch(error.code){
          case 3:
            alert("超時(shí)，請(qǐng)重試！");
            break;
          case 2:
            alert("位置信息不可用！");
            break;
          case 1:
            alert("用戶拒絕了該瀏覽器的位置信息請(qǐng)求！");
            break;
          case 0:
            alert("未知錯(cuò)誤！");
            break;
        }
      }
  • 配置對(duì)象 添加位置對(duì)象作為第三個(gè)參數(shù)options（是個(gè)對(duì)象{enableHeightAcuracy:true,timeout:5000,maximumAge:3000}）
  • enableHighAcuracy：true（指示瀏覽器獲取高精度的位置、默認(rèn)為false，設(shè)置為true優(yōu)先使用GPS定位）
  • timeout：5000 （指定獲取地理位置的超時(shí)時(shí)間、默認(rèn)不限時(shí)、單位為毫秒）
  • maximumAge：3000 （最長(zhǎng)有效期、在重復(fù)獲取地理位置時(shí)，此參數(shù)指定多久在此獲取位置）

watchPosition(用在移動(dòng)端，在設(shè)備位置發(fā)生變化后不斷執(zhí)行，用法和setCurrentPositon相同)

  • watchPosition（通常使用在移動(dòng)端，移動(dòng)設(shè)備位置一旦發(fā)生變化，就執(zhí)行一次，獲取位置）
var watcher;
      $('#bt1').click(function(){
        if(navigator.geolocation){
          alert("您的瀏覽器支持定位！");
          watcher = navigator.geolocation.watchPosition(successCallback,errorCallback);
        }else{
          alert("請(qǐng)更新你的瀏覽器！");
        }
      })
      $('#bt2').click(function(){
        if(navigator.geolocation){
          //alert("您的瀏覽器支持定位！");
          navigator.geolocation.clearWatch(watcher);
        }else{
          alert("請(qǐng)更新你的瀏覽器！");
        }
      })
      function successCallback(position){
        //console.log(222);
        var coords = position.coords;
        var latitude = coords.latitude;
        var longitude = coords.longitude;
        var accuracy = coords.accuracy;
        console.log(coords);
        alert(parseInt(latitude)+","+ parseInt(longitude));
        //console.log(result);
      }
      function errorCallback(error){
        //console.log(11);
        //alert(error);
        switch(error.code){
          case 3:
            alert("超時(shí)，請(qǐng)重試！");
            break;
          case 2:
            alert("位置信息不可用！");
            break;
          case 1:
            alert("用戶拒絕了該瀏覽器的位置信息請(qǐng)求！");
            break;
          case 0:
            alert("未知錯(cuò)誤！");
            break;
        }
      }

百度地圖API

  • 引入API
<script src="http://api.map.baidu.com/api?v=2.0&ak=您的密鑰" type="text/javascript">   </script>
  • 使用百度地圖API
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      *{
        margin: 0;
        padding: 0;
      }
      html,
      body {
        width: 100%;
        height: 100%;
        background: greenyellow;
      }
    </style>
  </head>
  <body>
    <div id="map" style="width:100%;height:100%;"></div>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
  <script src="http://api.map.baidu.com/api?v=2.0&ak=5aiK2z3bGTyMnInk6vjL0tZrU8GKHhl9" type="text/javascript"></script>
  <script type="text/javascript">
    var map = new BMap.Map("map");
    map.centerAndZoom('成都',15);
  </script>
  </body>
</html>
  • 用geolocation對(duì)象定位
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(callback: function, options: PositionOptions);

geolocation.getCurrentPosition(function(result) {
            var latitude = result.latitude;
            console.log(latitude);
});
  • 初始化百度地圖(map用來實(shí)例化地圖對(duì)象)
var mp = new BMap.Map(‘map’);  //創(chuàng)建地圖對(duì)象
var point = new BMap.Point(121.491, 31.233);//創(chuàng)建中心點(diǎn)對(duì)象
mp.centerAndZoom(point, 15); //初始化地圖，設(shè)置中心和縮放比例。
  • 初始化地圖和定位結(jié)合使用
var map = new BMap.Map("map");
    var geolocation = new BMap.Geolocation();
    geolocation.getCurrentPosition(successCallback);
    function successCallback(position){
      console.log(position);
      map.centerAndZoom(position.point,20);
    }

map對(duì)象常見方法

  • enableDragging()/disableDragging() 啟用/禁用地圖拖拽
  • enableScrollWheelZoom()/disableScrollWheelZoom() 啟用/禁用滾輪放大縮小
  • enableDoubleClickZoom()/disableDoubleClickZoom() 啟用/禁用雙擊放大
  • enableKeyboard()/enableKeyboard () 啟用/禁用鍵盤上下鍵移動(dòng)地圖
  • getCenter() 返回當(dāng)前的中心點(diǎn)對(duì)象

百度API控件

  • 百度API控件
  • Control：控件的抽象基類，所有控件均繼承此類的方法、屬性。通過此類您可實(shí)現(xiàn)自定義控件。
  • NavigationControl：地圖平移縮放控件，PC端默認(rèn)位于地圖左上方，它包含控制地圖的平移和縮放的功能。移動(dòng)端提供縮放控件，默認(rèn)位于地圖右下方。
  • OverviewMapControl：縮略地圖控件，默認(rèn)位于地圖右下方，是一個(gè)可折疊的縮略地圖。
  • ScaleControl：比例尺控件，默認(rèn)位于地圖左下方，顯示地圖的比例關(guān)系。
  • MapTypeControl：地圖類型控件，默認(rèn)位于地圖右上方。
  • CopyrightControl：版權(quán)控件，默認(rèn)位于地圖左下方。
  • GeolocationControl：定位控件，針對(duì)移動(dòng)端開發(fā)，默認(rèn)位于地圖左下方。
var MapTypeControl = new BMap.MapTypeControl();
map.addControl(MapTypeControl);
  • 應(yīng)用
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      *{
        margin: 0;
        padding: 0;
      }
      html,
      body {
        width: 100%;
        height: 100%;
        background: greenyellow;
      }
    </style>
  </head>
  <body>
    <button type="button" name="button" id="btn">定位</button>
    <div id="map" style="width:100%;height:100%;"></div>
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
  <script src="http://api.map.baidu.com/api?v=2.0&ak=5aiK2z3bGTyMnInk6vjL0tZrU8GKHhl9" type="text/javascript"></script>
  <script type="text/javascript">
      var map = new BMap.Map("map");
      initMap();
      initPosition();
    function initMap(){
      var opts = {
        anchor: BMAP_ANCHOR_BOTTOM_LEFT,
        offset:new BMap.Size(200,200),
        type:BMAP_NAVIGATION_CONTROL_LARGE
      }
      map.centerAndZoom("北京",20);
      var MapTypeControl = new BMap.MapTypeControl(opts);
      map.addControl(MapTypeControl);
      var NavigationControl = new BMap.NavigationControl();
      map.addControl(NavigationControl);
    }
    function initPosition(){
      $('#btn').click(function(){
        var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(successCallback);
      })
      function successCallback(position){
        //console.log(position);
        //var point = new BMap.Point(latitude,langtitude);
        map.centerAndZoom(position.point,20);
        //console.log(map.getCenter());
      }
    }
  </script>
  </body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容