百度地图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标签：

避免页面中出现：

Uncaught TypeError: Cannot read property 'gc' of undefined

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

<script type="text/javascript">var map = new BMap.Map("allmap");//创建Map实例，注意页面中一定要有个id为allmp的divvar 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":"城市"}}

转载于:https://www.cnblogs.com/Can-daydayup/p/10941470.html

百度地图JavaScript API获取用户当前经纬度和详细地理位置，反之通过详细地理位置获取当前经纬度...相关推荐

百度地图JavaScript API经纬度查询-MAP
百度地图JavaScript API经纬度查询-MAP-ABCDEFGHIJKMHNOPQRSTUVWXYZ: 搜索:<input type="text" size=&quo ...
html5 百度地图api文档,开发指南--百度地图JavaScript API大众版.doc
开发指南--百度地图JavaScriptAPI大众版开发指南--百度地图JavaScriptAPI大众版简介 JavaScript API大众版 JavaScript API功能介绍百度地图Jav ...
百度地图 JavaScript API
文章目录 1.账号申请 2.创建应用 3.使用地图介绍示例 4.具体使用控件个性地图带高度的点(标记地点.覆盖物) 点击事件参考资料: 入门百度地图 JavaScript API | 8月 ...
百度地图JavaScript API GL 实现车辆轨迹功能
百度地图JavaScript API GL是百度地图提供的一种基于WebGL技术的地图展示方式.它可以在现代浏览器中以更高效的方式呈现3D地图场景,同时支持自定义图层和动画效果,可以应用于各种地图应用 ...
百度地图JavaScript API GL—简易行政区划图层
map开发百度地图JavaScript API GL-简易行政区划图层 administrator 2022年6月6日简易行政区划图层更新时间:2022年3月12日简介 DistrictLay ...
百度地图JavaScript API覆盖物旋转时出现偏移
在项目中,调用百度地图JavaScript API,做覆盖物的旋转再添加到地图上,结果出现偏移了. 调试过程中的效果图: 发现图片的旋转并不是按车子的中心来的,而是之外的一个点.最后发现犯了一个很细节 ...
百度地图JavaScript API GL
介绍百度地图JavaScript API GL v1.0是一套由JavaScript语言编写的应用程序接口. 下面通过一个简单的示例,来学习一下快速创建一张"我的地图", 百度地 ...
Java经纬度画轨迹图_利用百度地图JavaScript API绘制运动轨迹
写在前面欢迎访问我的博客如果需要使用百度地图javasript api,需先进行开发者认证,balalalala写上一堆理由之后认证就行,然后创建浏览器端的应用,得到可用的Ak,详情见百度地图开放 ...
百度地图JavaScript API 学习之浏览器定位
浏览器定位示例百度地图API官方的所有demo示例--请直戳这里官方浏览器定位demo示例--请直戳这里后来发现的问题,这里记录一下: 在使用百度地图JS API时,无意中发现谷歌浏览器的浏览器 ...