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

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

前言:

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

🚀回到顶部

解决方案:

引入JavaScript API v2.0 SDK

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

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

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

避免页面中出现:

Uncaught TypeError: Cannot read property 'gc' of undefined

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

<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>

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

<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定位获取当前所在城市

<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>

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

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

$.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格式的响应数据:

{"status":0,"result":{"location":{"lng":112.94547319535288,"lat":28.23488939994364},"precise":0,"confidence":12,"comprehension":100,"level":"城市"}}
相关文章
|
9月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
新能源 API
百科-百度免费API接口教程
该接口用于从百度百科获取指定名词的基础解释。支持POST或GET请求,需提供用户ID、用户KEY及查询内容。返回状态码和解释内容或错误提示。示例:https://cn.apihz.cn/api/zici/baikebaidu.php?id=88888888&key=88888888&words=汽车。建议使用个人ID与KEY以享受更高调用频次。
1367 4
表情包-百度版免费API接口教程
该接口用于通过指定关键词从百度渠道获取表情包,支持POST或GET请求。需提供用户ID和KEY,可选参数包括关键词、页码及结果数量。返回数据包含状态码、信息提示、结果集等。示例中ID与KEY为公共测试用,建议使用个人ID与KEY以享受更高调用频率。
1434 4
通用图片搜索-百度源免费API接口教程
该接口用于搜索百度图片,支持通过关键词、页码、结果数量等参数获取图片搜索结果。请求方式为POST或GET,需提供用户ID和KEY,可选参数包括关键词、页码、结果数量及返回源类型。返回结果包含状态码、信息提示、结果集、当前页码、最大页码和结果数量。示例中提供了GET和POST请求方法及返回数据示例。
1659 4
|
JavaScript 前端开发 API
JavaScript 验证 API
JavaScript 验证 API
131 2
|
JavaScript 前端开发 定位技术
百度地图JavaScript API v2.0创建地图
百度地图JavaScript API v2.0创建地图
198 0
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
293 2
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
224 1
JavaScript中的原型 保姆级文章一文搞懂
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
148 0
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
433 5

热门文章

最新文章