让代码更简单

当前位置:代码狗 > 开发教程 > WEB开发教程 > 正文

HTML中使用百度地图获取用户当前位置

重要:本文最后更新于2020-02-29 09:34:03,某些文章具有时效性,若有错误或已失效,请在下方留言或联系代码狗

大家在开发web网页的时候有没有遇到需要定位用户位置的情况呢?是使用IP来定位还是使用html5的特性定位呢?或者是使用百度地图,腾讯地图等第三方平台来实现定位呢?下面是我使用百度地图提供的js支持获取用户当前位置的示例,这种方式可以得到用户的经纬度或者位置名称,个人觉得挺好用的。

百度地图定位

百度地图定位

首先你需要先去百度地图申请接口使用权限,通过后可以拿到你的授权ak,然后就可以通过如下形式的JavaScript将百度地图定位js引入你的网页了。

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的ak授权"></script>

然后还需要在百度地图后台设置运行使用定位的服务器白名单,否则是无法定位的。

然后使用如下js代码获取用户当前经纬度:

  var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(r){
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                alert("坐标:"+r.point.lng+":"+ r.point.lat);
            }
            else {
                alert('定位失败'+this.getStatus());
            }        
        },{enableHighAccuracy: true})

想要获取用户的地址名称,需要在取得经纬度的情况下,使用getLocation方法,代码如下:

var geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(function(r){
            if(this.getStatus() == BMAP_STATUS_SUCCESS){
                var mk = new BMap.Marker(r.point);
                // 创建地理编码实例      
                var myGeo = new BMap.Geocoder();      
                // 根据坐标得到地址描述    
                myGeo.getLocation(new BMap.Point(r.point.lng, r.point.lat), function(result){      
                    if (result){      
                    alert(result.address);      
                    }      
                });
            }
            else {
                alert('定位失败'+this.getStatus());
            }        
        },{enableHighAccuracy: true})

百度地图提供了很多接口,比如将地址名称转换为经纬度等,我这里没用到,就不多讲了,有需要的自己看看官方的api文档吧。

感觉很棒!可以赞赏支持我哟~

赞(1) 打赏

评论 抢沙发

×

请作者吃根烤肠!

支付宝