前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >百度地图JavaScript API获取用户当前经纬度和详细地理位置,反之通过详细地理位置获取当前经纬度

百度地图JavaScript API获取用户当前经纬度和详细地理位置,反之通过详细地理位置获取当前经纬度

作者头像
追逐时光者
发布2019-08-28 12:15:41
6.8K0
发布2019-08-28 12:15:41
举报
文章被收录于专栏:编程进阶实战

前言:

  前端时间刚好使用了百度地图的js api定位获取用户当前经纬度并获取当前详细位置和通过当前用户详细地理位置换取用户当前经纬度坐标的功能,为了方便下次找起来方便一些自己在这里记录一下,希望也能够帮助到有需要的童鞋们!

解决方案:

引入JavaScript API v2.0 SDK

代码语言:javascript
复制
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

在页面中定义一个以ID为allmap的DIV标签:

<div id="allmap"></div>

避免页面中出现:

代码语言:javascript
复制
Uncaught TypeError: Cannot read property 'gc' of undefined

通过SDK 辅助定位获取坐标,然后在获取当前用户详细地址

代码语言:javascript
复制
<script type="text/javascript">
    var map = new BMap.Map("allmap");//创建Map实例,注意页面中一定要有个id为allmp的div
    var point = new BMap.Point(116.331398,39.897445);//创建定坐标
    map.centerAndZoom(point,12);//// 初始化地图,设置中心点坐标和地图级别

    var geolocation = new BMap.Geolocation();
    var gc = new BMap.Geocoder();//创建地理编码器
    // 开启SDK辅助定位
    geolocation.enableSDKLocation();
    geolocation.getCurrentPosition(function(r){
        if(this.getStatus() == BMAP_STATUS_SUCCESS){
            var mk = new BMap.Marker(r.point);
            map.addOverlay(mk);
            map.panTo(r.point);
            alert('您的位置:' + r.point.lng + ',' + r.point.lat);

            var pt = r.point;   
            map.panTo(pt);//移动地图中心点
            //alert(r.point.lng);//X轴
            //alert(r.point.lat);//Y轴 
 
            gc.getLocation(pt, function(rs){    
                var addComp = rs.addressComponents;
                //alert(addComp.city);
               alert(addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber);    
            });  

        }
        else {
            alert('failed'+this.getStatus());
        }        
    });
</script>

通过浏览器定位获取当前经纬度:

代码语言:javascript
复制
<script type="text/javascript">
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,12);

var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r){
    if(this.getStatus() == BMAP_STATUS_SUCCESS){
        var mk = new BMap.Marker(r.point);
        map.addOverlay(mk);
        map.panTo(r.point);
        alert('您的位置:'+r.point.lng+','+r.point.lat);
    }
    else {
        alert('failed'+this.getStatus());
    }        
});
</script>

ip定位获取当前所在城市

代码语言:javascript
复制
<script type="text/javasript">
var map = new BMap.Map("allmap");
var point = new BMap.Point(116.331398,39.897445);
map.centerAndZoom(point,12);

function myFun(result){
    var cityName = result.name;
    map.setCenter(cityName);
    alert("当前定位城市:"+cityName);
}
var myCity = new BMap.LocalCity();
myCity.get(myFun); 
</script>

通过详细地理位置换取当前用户经纬度坐标

代码语言:javascript
复制
http://api.map.baidu.com/geocoder/v2/?address=长沙市&output=json&ak=您的密钥

我使用的是ajax请求数据,注意假如dataType为json时会出现跨域问题,最终我使用的是jsonp请求就解决了:

json和jsonp之间的区别:https://www.cnblogs.com/strugglion/p/5929821.html

代码语言:javascript
复制
$.ajax({
url:"http://api.map.baidu.com/geocoder/v2/?address="+city+"&output=json&ak=您的密钥",
dataType:'jsonp',
processData: false, 
type:'get',
success:function(data){
console.log(data);
if (data.status==0) {
console.log("纬度:"+data.result.location.lat+"经度:"+data.result.location.lng);
}
},
error:function(XMLHttpRequest, textStatus, errorThrown) {
console.log(XMLHttpRequest.status);
console.log(XMLHttpRequest.readyState);
console.log(textStatus);
}});

返回json格式的响应数据:

代码语言:javascript
复制
{"status":0,"result":{"location":{"lng":112.94547319535288,"lat":28.23488939994364},"precise":0,"confidence":12,"comprehension":100,"level":"城市"}}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019-05-29 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言:
  • 解决方案:
    • 引入JavaScript API v2.0 SDK
      • 在页面中定义一个以ID为allmap的DIV标签:
        • 通过SDK 辅助定位获取坐标,然后在获取当前用户详细地址
          • 通过浏览器定位获取当前经纬度:
            • ip定位获取当前所在城市
              • 通过详细地理位置换取当前用户经纬度坐标
              领券
              问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档