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

杨小羽 發表於 2019-5-29 01:11:00

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

<h2>前言：</h2>
　　前段时间刚好使用了百度地图的js api定位获取用户当前经纬度并获取当前详细位置和通过当前用户详细地理位置换取用户当前经纬度坐标的功能，为了方便下次找起来方便一些自己在这里记录一下，希望也能够帮助到有需要的童鞋们！
<h2>解决方案：</h2>
<h3>引入JavaScript API v2.0 SDK</h3>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script></pre>
</div>
<h3>在页面中定义一个以ID为allmap的DIV标签：</h3>
<div id="allmap"></div>
避免页面中出现：
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">Uncaught TypeError: Cannot read property 'gc' of undefined</pre>
</div>
<h3>通过SDK 辅助定位获取坐标，然后在获取当前用户详细地址</h3>
<div class="cnblogs_code">
<pre><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></pre>
</div>
<h3>通过浏览器定位获取当前经纬度：</h3>
<div class="cnblogs_code">
<pre><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></pre>
</div>
<h3>ip定位获取当前所在城市</h3>
<div class="cnblogs_code">
<pre><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></pre>
</div>
<h3>通过详细地理位置换取当前用户经纬度坐标</h3>
<div class="cnblogs_code">
<pre>http://api.map.baidu.com/geocoder/v2/?address=长沙市&output=json&ak=您的密钥</pre>
</div>
我使用的是ajax请求数据，注意假如dataType为json时会出现跨域问题，最终我使用的是jsonp请求就解决了：
json和jsonp之间的区别：https://www.cnblogs.com/strugglion/p/5929821.html
<div class="cnblogs_code">
<pre>$.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);
}});</pre>
</div>
返回json格式的响应数据：
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">{"status":0,"result":{"location":{"lng":112.94547319535288,"lat":28.23488939994364},"precise":0,"confidence":12,"comprehension":100,"level":"城市"}}
</pre>
</div>
　　

</div>
<div id="MySignature" role="contentinfo">
<blockquote >
作者名称：追逐时光者
作者简介：一个热爱编程、善于分享、喜欢学习、探索、尝试新事物和新技术的全栈软件工程师。

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接，否则保留追究法律责任的权利。如果该篇文章对您有帮助的话，可以点一下右下角的【&hearts;推荐&hearts;】，希望能够持续的为大家带来好的技术文章，文中可能存在描述不正确的地方，欢迎指正或补充，不胜感激。

</blockquote> 
来源：https://www.cnblogs.com/Can-daydayup/p/10941470.html

頁: [1]

琼殿技术论坛's Archiver

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