百度地图API -- 开发总结

本文总结了在移动端应用百度地图API进行定位的方法,详细介绍了移动端调用API实现定位的流程。然而,在PC浏览器中调用时,可能出现定位图标显示不准确的问题,定位图标可能停留在初始位置而非实际定位位置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

    百度地图API自带的方法来定位,可以应用于浏览器定位于移动端app定位。
  var map = new BMap.Map("map");     //创建地图实例
  var point = new BMap.Point(116.331398,39.897445);    //创建经纬度实例
  map.centerAndZoom(point,12);             //地图开始时的显示位置

  var geolocation = new BMap.Geolocation();     //创建定位实例
  geolocation.getCurrentPosition(function(r){   //调用方法   //填写配置项(function(回调函数)  )
    if(this.getStatus() == BMAP_STATUS_SUCCESS){ 
      var mk = new BMap.Marker(r.point);        // 这个同样是创建经纬度实例,但是是geolocation 里面的自己定义的方法
      map.addOverlay(mk);       //将坐标图标添加到地图中
      map.panTo(r.point);       //将地图的中心店转移到  添加图标的点 

      //alert('您的位置:'+r.point.lng+','+r.point.lat);  //经纬度的显示方式 是r.point.lng
    }
    else {
      alert('failed'+this.getStatus());
    }
  },{enableHighAccuracy: true});
//关于状态码
    //BMAP_STATUS_SUCCESS   检索成功。对应数值“0”。
    //BMAP_STATUS_CITY_LIST 城市列表。对应数值“1”。
    //BMAP_STATUS_UNKNOWN_LOCATION  位置结果未知。对应数值“2”。
    //BMAP_STATUS_UNKNOWN_ROUTE 导航结果未知。对应数值“3”。
    //BMAP_STATUS_INVALID_KEY   非法密钥。对应数值“4”。
    //BMAP_STATUS_INVALID_REQUEST   非法请求。对应数值“5”。
    //BMAP_STATUS_PERMISSION_DENIED 没有权限。对应数值“6”。(自 1.1 新增)
    //BMAP_STATUS_SERVICE_UNAVAILABLE   服务不可用。对应数值“7”。(自 1.1 新增)
    //BMAP_STATUS_TIMEOUT   超时。对应数值“8”。(自 1.1 新增)

注意:

1.移动端调用上面的方法。没有问题。
2.PC浏览器中调用,就会出现定位图标 落在 开始时的显示位置,而不是真正的定位位置。

源生浏览器的方法:

if(navigator.geolocation){
    alert('navigator.geolocation exist');
    // getCurrentPosition支持三个参数
    // getSuccess是执行成功的回调函数
    // getError是失败的回调函数
    // getOptions是一个对象,用于设置getCurrentPosition的参数
    // 后两个不是必要参数
    var getOptions = {
      //是否使用高精度设备,如GPS。默认是true
      enableHighAccuracy:true,
      //超时时间,单位毫秒,默认为0
      timeout:5000,
      //使用设置时间内的缓存数据,单位毫秒
      //默认为0,即始终请求新数据
      //如设为Infinity,则始终使用缓存数据
      maximumAge:0
    };

    //成功回调
    function getSuccess(position){
      alert('success');
      // getCurrentPosition执行成功后,会把getSuccess传一个position对象
      // position有两个属性,coords和timeStamp
      // timeStamp表示地理数据创建的时间??????
      // coords是一个对象,包含了地理位置数据
      console.log(position.timeStamp);

      // 估算的纬度
      console.log(position.coords.latitude);
      // 估算的经度
      console.log(position.coords.longitude);
      // 估算的高度 (以米为单位的海拔值)
      console.log(position.coords.altitude);
      // 所得经度和纬度的估算精度,以米为单位
      console.log(position.coords.accuracy);
      // 所得高度的估算精度,以米为单位
      console.log(position.coords.altitudeAccuracy);
      // 宿主设备的当前移动方向,以度为单位,相对于正北方向顺时针方向计算
      console.log(position.coords.heading);
      // 设备的当前对地速度,以米/秒为单位
      console.log(position.coords.speed);
      // 除上述结果外,Firefox还提供了另外一个属性address
      alert('经纬度:'+position.coords.longitude+'/'+position.coords.latitude);



      if(position.address){
        alert('position.address exist!');
        //通过address,可以获得国家、省份、城市
        console.log(position.address.country);
        console.log(position.address.province);
        console.log(position.address.city);
      }
      var lat = position.coords.latitude;//获取纬度
      var lon = position.coords.longitude; //获取经度

      var map = new BMap.Map("map");    // 创建Map实例
      map.clearOverlays();
      var new_point = new BMap.Point(lat,lon);

      //var point = new BMap.Point(116.331398,39.897445);

      //map.centerAndZoom(point, 15);  // 初始化地图,设置中心点坐标和地图级别*!/


      // 百度地图API功能
      var a = position.coords.longitude,b = position.coords.latitude;
      var map = new BMap.Map("map");
      var point = new BMap.Point(a, b);
      var pointBqsqcm = new BMap.Point(116.403897,39.914889);
      map.centerAndZoom(point, 15);
      var marker = new BMap.Marker(point);  // 创建标注
      var marker2 = new BMap.Marker(pointBqsqcm);
      map.addOverlay(marker);               // 将标注添加到地图中
      map.addOverlay(marker2);
      //marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画*!/

    }
    //失败回调
    function getError(error){
      // 执行失败的回调函数,会接受一个error对象作为参数
      // error拥有一个code属性和三个常量属性TIMEOUT、PERMISSION_DENIED、POSITION_UNAVAILABLE
      // 执行失败时,code属性会指向三个常量中的一个,从而指明错误原因
      switch(error.code){
        case error.TIMEOUT:
          console.log('超时');
          break;
        case error.PERMISSION_DENIED:
          console.log('用户拒绝提供地理位置');
          break;
        case error.POSITION_UNAVAILABLE:
          console.log('地理位置不可用');
          break;
        default:
          break;
      }
    }

    navigator.geolocation.getCurrentPosition(getSuccess, getError, getOptions);


    // watchPosition方法一样可以设置三个参数
    // 使用方法和getCurrentPosition方法一致,只是执行效果不同。
    // getCurrentPosition只执行一次
    // watchPosition只要设备位置发生变化,就会执行
    //var watcher_id = navigator.geolocation.watchPosition(getSuccess, getError, getOptions);
    //clearwatch用于终止watchPosition方法
    //navigator.geolocation.clearWatch(watcher_id);

  }

总结:移动端应用百度地图的方法进行定位。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值