前言:
前端时间刚好使用了百度地图的 JS API 定位获取用户当前经纬度并获取当前详细位置的功能, 为了方便下次找起来方便一些自己在这里记录一下, 希望也能够帮助到有需要的童鞋们!
解决方案:
一, 引入 JavaScript API v2.0 SDK
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak = 您的密钥"></script>
<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>
来源: https://www.cnblogs.com/Can-daydayup/p/10941470.html