H5地理定位

地理位置

if(navigator.geolocation){
        alert("您的浏览器支持定位！");
      }else{
        alert("请更新你的浏览器！");
      }

getCurrentPostion

if(navigator.geolocation){
        alert("您的浏览器支持定位！");        navigator.geolocation.getCurrentPosition(successCallback,errorCallback);
      }else{
        alert("请更新你的浏览器！");
      }
      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("请更新你的浏览器！");
      }
      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("超时，请重试！");
            break;
          case 2:
            alert("位置信息不可用！");
            break;
          case 1:
            alert("用户拒绝了该浏览器的位置信息请求！");
            break;
          case 0:
            alert("未知错误！");
            break;
        }
      }

• 配置对象 添加位置对象作为第三个参数options（是个对象{enableHeightAcuracy:true,timeout:5000,maximumAge:3000}）
• enableHighAcuracy：true（指示浏览器获取高精度的位置、默认为false，设置为true优先使用GPS定位）
• timeout：5000 （指定获取地理位置的超时时间、默认不限时、单位为毫秒）
• maximumAge：3000 （最长有效期、在重复获取地理位置时，此参数指定多久在此获取位置）

watchPosition(用在移动端，在设备位置发生变化后不断执行，用法和setCurrentPositon相同)

• watchPosition（通常使用在移动端，移动设备位置一旦发生变化，就执行一次，获取位置）

var watcher;
      $('#bt1').click(function(){
        if(navigator.geolocation){
          alert("您的浏览器支持定位！");
          watcher = navigator.geolocation.watchPosition(successCallback,errorCallback);
        }else{
          alert("请更新你的浏览器！");
        }
      })
      $('#bt2').click(function(){
        if(navigator.geolocation){
          //alert("您的浏览器支持定位！");
          navigator.geolocation.clearWatch(watcher);
        }else{
          alert("请更新你的浏览器！");
        }
      })
      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("超时，请重试！");
            break;
          case 2:
            alert("位置信息不可用！");
            break;
          case 1:
            alert("用户拒绝了该浏览器的位置信息请求！");
            break;
          case 0:
            alert("未知错误！");
            break;
        }
      }

百度地图API

• 引入API

• 使用百度地图API

• 用geolocation对象定位

var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(callback: function, options: PositionOptions);

geolocation.getCurrentPosition(function(result) {
            var latitude = result.latitude;
            console.log(latitude);
});

• 初始化百度地图(map用来实例化地图对象)

var mp = new BMap.Map(‘map’);  //创建地图对象
var point = new BMap.Point(121.491, 31.233);//创建中心点对象
mp.centerAndZoom(point, 15); //初始化地图，设置中心和缩放比例。

• 初始化地图和定位结合使用

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对象常见方法

• enableDragging()/disableDragging() 启用/禁用地图拖拽
• enableScrollWheelZoom()/disableScrollWheelZoom() 启用/禁用滚轮放大缩小
• enableDoubleClickZoom()/disableDoubleClickZoom() 启用/禁用双击放大
• enableKeyboard()/enableKeyboard () 启用/禁用键盘上下键移动地图
• getCenter() 返回当前的中心点对象

百度API控件

• 百度API控件
• Control：控件的抽象基类，所有控件均继承此类的方法、属性。通过此类您可实现自定义控件。
• NavigationControl：地图平移缩放控件，PC端默认位于地图左上方，它包含控制地图的平移和缩放的功能。移动端提供缩放控件，默认位于地图右下方。
• OverviewMapControl：缩略地图控件，默认位于地图右下方，是一个可折叠的缩略地图。
• ScaleControl：比例尺控件，默认位于地图左下方，显示地图的比例关系。
• MapTypeControl：地图类型控件，默认位于地图右上方。
• CopyrightControl：版权控件，默认位于地图左下方。
• GeolocationControl：定位控件，针对移动端开发，默认位于地图左下方。

var MapTypeControl = new BMap.MapTypeControl();
map.addControl(MapTypeControl);

• 应用

  
    
    
    
  
  
    定位