html5地理位置(geolocation)大法好

Mr_zhang 发布于2019-08-20 12:30 / 495人阅读

摘要：礼物不需挑最贵，只要香榭的落叶本想拿这句当标题的，可是怕被当做标题党。杰迷应该对这句话很是熟悉告白气球的歌词，方文山的作词很是吊啊。

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

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81022.html

html5地理位置(geolocation)大法好

摘要：礼物不需挑最贵，只要香榭的落叶本想拿这句当标题的，可是怕被当做标题党。杰迷应该对这句话很是熟悉告白气球的歌词，方文山的作词很是吊啊。礼物不需挑最贵，只要香榭的落叶本想拿这句当标题的，可是怕被当做标题党。杰迷应该对这句话很是熟悉,《告白气球》的歌词，方文山的作词很是吊啊。这句话的意思是,送的礼物不要太贵重,只要香榭丽舍大道的落叶就可以了,但是香榭丽舍大道是个啥,它是法国巴黎的一个繁华...

canger 2019-08-01 15:58 评论0 收藏0
Javascript学习总结 - html5实现定位地理位置

摘要：草案的前身名为，于年被提出，于年被接纳，并成立了新的工作团队。的第一份正式草案已于年月日公布。年月日，万维网联盟正式宣布凝结了大量网络工作者心血的规范已经正式定稿。简述最近在苦逼学习Javascript，并且是有任务需要去完成的，因此就有一个想法要总结记录一下自己的学习成果。这次的总结主题是html5实现定位地理位置的任务，结合原生的Javascript实现此功能。 html5 什...

Fundebug 2019-08-19 17:06 评论0 收藏0
Javascript学习总结 - html5实现定位地理位置

摘要：草案的前身名为，于年被提出，于年被接纳，并成立了新的工作团队。的第一份正式草案已于年月日公布。年月日，万维网联盟正式宣布凝结了大量网络工作者心血的规范已经正式定稿。简述最近在苦逼学习Javascript，并且是有任务需要去完成的，因此就有一个想法要总结记录一下自己的学习成果。这次的总结主题是html5实现定位地理位置的任务，结合原生的Javascript实现此功能。 html5 什...

layman 2019-08-28 18:23 评论0 收藏0
Javascript学习总结 - html5实现定位地理位置

摘要：草案的前身名为，于年被提出，于年被接纳，并成立了新的工作团队。的第一份正式草案已于年月日公布。年月日，万维网联盟正式宣布凝结了大量网络工作者心血的规范已经正式定稿。简述最近在苦逼学习Javascript，并且是有任务需要去完成的，因此就有一个想法要总结记录一下自己的学习成果。这次的总结主题是html5实现定位地理位置的任务，结合原生的Javascript实现此功能。 html5 什...

impig33 2019-08-01 14:57 评论0 收藏0