html5地理位置(geolocation)大法好

2019年9月8日 165次阅读 来源: 阿基米德

礼物不需挑最贵，只要香榭的落叶

本想拿这句当标题的，可是怕被当做标题党。杰迷应该对这句话很是熟悉,《告白气球》的歌词，方文山的作词很是吊啊。这句话的意思是,送的礼物不要太贵重,只要香榭丽舍大道的落叶就可以了,但是香榭丽舍大道是个啥,它是法国巴黎的一个繁华的地方,我滴天呐,去趟巴黎也挺贵吧,用百度地图查了下,居然定位不到外国,这个定位也是够够的了,说了这么多废话,主(qiang)要(la)引(ying)出(zhuai)这篇要说的’地理位置的定位’

作为浏览器这样可以使用底层功能的,可以精准的定位,利用 GPS 和 WIFI以及基站来定位,到了页面中,我们只能跪求浏览器提供接口了,还好HTML5中提供这一特性

是否支持

由于是浏览器提供的接口,根据浏览器的差异，可能支持的不是很好,所以我们要判断一下，支持的话我们继续装,不支持的话,换个其他思路继续装
上代码:

if (navigator.geolocation) {
    // do something
else{
    // do other something
}

看到navigator 就知道和浏览器有关

获取地理位置

var option = {
    timeout : 5000 // 5 秒超时
    enableHighAccuracy: true //true获取的精度高
}
navigator.geolocation.getCurrentPosition(getPositionSuccess, getPositionError, option);
function getPositionSuccess( position ){//成功时
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
    console.log( "您所在的位置： 经度" + lat + "，纬度" + lng );
    if(typeof position.address !== "undefined"){
        var country = position.address.country;
        var province = position.address.region;
        var city = position.address.city;
        console.log(' 您位于 ' + country + province + '省' + city +'市');
    }else {//如果不能得到具体的地理位置，那么就利用百度地图的接口
        var script = document.createElement('script');
        script.src = 'http://api.map.baidu.com/getscript?v=2.0';
        document.getElementsByTagName('head')[0].insertBefore(script, document.getElementsByTagName('head')[0].childNodes[0])
        script.onload = function(){
            var point = new BMap.Point(lng, lat);
            var myGeo = new BMap.Geocoder();
            myGeo.getLocation(point, function (result) {
                 console.log(result)
            });
        }
    }
    
}
function getPositionError(error){//出错时
    switch(error.code){
        case error.TIMEOUT :
            console.log( " 连接超时，请重试 " );
            break;
        case error.PERMISSION_DENIED :
            console.log( " 您拒绝了使用位置共享服务，查询已取消 " );
            break;
        case error.POSITION_UNAVAILABLE :  
            console.log( " 亲爱的火星网友，非常抱歉，我们暂时无法为您所在的星球提供位置服务 " );
            break;
    }
}

实时获取地理位置

navigator.geolocation.watchPosition( refreshPosition, errorFunc, option);
//参数和getCurrentPosition是一样的

应用

记得前段时间有个抓小精灵的游戏很是火爆,那个是app级别的,后续的又看到了很多网页版的基本上都是基于navigator.geolocation
所以像这种LBS的小应用还是很招人喜欢的,但是粘性稍微差点,需要一个比较完善的系统来增加更多的玩法;网页中来实现基于LBS的产品有弊也有利

微信公众平台接口中有获取地理位置,可以意淫一下,它封装的肯定会比原生的要好;对于百度、腾讯、高德提供的地图接口应该是很丰富的,依托它们强大的资源,可以提供更多我们更多可以想象的.例如微信的小程序,够大家意淫很长一段时间的了

ps:本文是一个很是基础的文章，没有特别的，主要是最近给一个实习生填了个坑涉及到了这个东西;最让人蛋疼的是用户拒绝访问之后，然后就没有然后了，之后就一直是拒绝状态,只能人工来清除手机浏览器的地理位置的数据;要是有一个接口必须要用户手动触发获取的就好了,这个缺陷很是蛋疼

原文链接:http://azq.space/blog/20161123/

公众号

《html5地理位置(geolocation)大法好》

    原文作者：阿基米德
    原文地址: https://segmentfault.com/a/1190000007577637
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞