web手机端如何定位(安卓版和ipone版),兼容移动端,定位准确

移动端html5如何定位?

话不多说我们直接贴代码,首先我们针对我们的安卓手机进行定位,安卓手机我们直接可以调用html5的定位,但是如果要想定位准确我们需要用百度地图进行经纬度转换

1,html5定位
 var options={
            enableHighAccuracy:true,//开启高精度
            maximumAge:1000
        }
        if(navigator.geolocation){
            //浏览器支持geolocation
            navigator.geolocation.getCurrentPosition(onSuccess,onError,options);
        }else{
            //浏览器不支持geolocation
            errGoIndex('您的浏览器不支持地理位置定位');
        }
        //失败时
 function onError(error){
    status=true;
    switch(error.code){
        case error.PERMISSION_DENIED:
            errGoIndex("定位失败,用户拒绝请求地理定位");
            break;
        case error.POSITION_UNAVAILABLE:
            errGoIndex("定位失败,位置信息是不可用");
            break;
        case error.TIMEOUT:
            errGoIndex("定位失败,请求获取用户位置超时");
            break;
        case error.UNKNOWN_ERROR:
            errGoIndex("定位失败,定位系统失效");
            break;
    }
}
2,成功时我们进行百度地图经纬度转换
function onSuccess(position){
 //经度
        var longitude = position.coords.longitude;
        //纬度
        var latitude = position.coords.latitude;
         //坐标转换完之后的回调函数
    translateCallback = function (data){
      if(data.status === 0) {
        var marker = new BMap.Marker(data.points[0]);
        bm.addOverlay(marker);
        var label = new BMap.Label("转换后的百度标注(正确)",{offset:new BMap.Size(20,-10)});
        marker.setLabel(label); //添加百度label
        bm.setCenter(data.points[0]);
      }
    }

    setTimeout(function(){
        var convertor = new BMap.Convertor();
        var pointArr = [];
        pointArr.push(ggPoint);
        convertor.translate(pointArr, 3, 5, translateCallback)
    }, 1000);
}
转换为我们的百度地图的经纬度,然后我们可以利用我们的百度地图api进行精确的定位

3,很多人遇到苹果手机上html5无法定位的问题,主要是ios10以上的版ipone对我们的安全作了更高的限制,所有的http请求都不能定位,这时候我们就不能使用我们的html5进行定位了,我当时也是花了九牛二虎之力才找到替换他的方法,就是利用我们的腾讯地图api进行定位,经过试验定位很准确。
    var geolocation = new qq.maps.Geolocation("自己的注册码", "myapp");
        if (geolocation) {
            var options = {timeout: 20000};
            geolocation.getLocation(onSuccess, showErr, options);
        } else {
            errGoIndex("定位尚未加载");
        }
        然而这一步如果是使用我们的百度地图,我们发现我们获得经纬度获得的地点不准确,其实我们还需要进行将腾讯地图转化为百度地图的操作,这样我们获得定位信息就相当准确了。

ok,这样我们的定位就可以了,亲测在移动端完美定位 (附一张图)

这里写图片描述

  • 3
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值