300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > 百度地图JavaScript API获取用户当前经纬度并获取用户当前详细地理位置

百度地图JavaScript API获取用户当前经纬度并获取用户当前详细地理位置

时间:2023-09-02 06:39:15

相关推荐

百度地图JavaScript API获取用户当前经纬度并获取用户当前详细地理位置

前言:

前端时间刚好使用了百度地图的js api定位获取用户当前经纬度并获取当前详细位置的功能,为了方便下次找起来方便一些自己在这里记录一下,希望也能够帮助到有需要的童鞋们!项目来源于:/Can-daydayup/p/10941470.html

回到顶部

解决方案:

一、引入JavaScript API v2.0 SDK

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

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

避免页面中出现:

三、通过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>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。