百度地图JavaScript API获取用户当前经纬度并获取用户当前详细地理位置
2019-05-29 01:11
2196 查看
前言:
前端时间刚好使用了百度地图的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>
相关文章推荐
- 百度开发者API接口:获取经纬度和详细地理位置(Geocoding API和IP定位API)
- (简单详细)React Native获取手机当前经纬度,(通过高德地图接口)获取当前地理位置
- C#微信结合百度api获取当前用户的地理位置
- 如何获取用户当前详细地理位置
- C#实现微信结合百度api获取当前用户地理位置的方法
- html5获取地理位置 利用百度地图JavaScript API标注
- 续【C#微信结合百度api获取当前用户的地理位置】代码详解
- html5获取用户当前的地理位置,即经纬度。
- HTML5获取当前地理位置并在百度地图上展示的实例
- 通过javascript 获取当前地理位置 所在城市
- 安卓LocationManager获取当前地理位置(经纬度)
- 通过经纬度获取地理位置详细信息
- JavaScript获取用户所在城市及地理位置
- HTML5 调用 GPSAPI 获取当前位置的坐标 显示在地图上(有包括百度地图与谷歌地图)
- 用js获取当前地理位置的经纬度
- 利用google提供的API(JavaScript接口)获取网站访问者IP地理位置的代码详解
- 用户Ip地址和百度地图api接口获取用户地理位置(经纬度坐标,城市)
- 微信小程序 获取当前地理位置和经纬度实例代码
- 【百度地图API·javascriptapi】地图定位、创建自定义图标、获取用户点击位置
- Geolocation获取当前位置的经纬度在百度地图中就是比google地图中精确的原因