您现在的位置是:首页 > Javascript
当前栏目
百度地图JavaScript API获取用户当前经纬度和详细地理位置,反之通过详细地理位置获取当前经纬度
2023-02-18 16:31:48 时间
前言:
前段时间刚好使用了百度地图的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>
通过详细地理位置换取当前用户经纬度坐标
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":"城市"}}
相关文章
- NanoDet:这是个小于4M超轻量目标检测模型
- JavaScript回调函数的高手指南
- 前端开发:4、JavaScript简介、变量与常量、数据类型及内置方法、运算符、流程控制、循环结构、内置方法
- Python基础之模块:3、os模块 sys模块 json模块 json实战
- filebeat收集日志到elsticsearch中并使用ingest node的pipeline处理
- 技巧收藏|10个JavaScript常用数组操作方法
- 即使不会node.js,拖拽就可完成数据的可视化展示
- 如何使用Node.js连接数据库
- 解决aspnetcore-browser-refresh.js:234 WebSocket connection to 'wss://localhost:62356/Admin/' failed问题
- APIJSON-实现一对一,一对多复杂查询
- APIJSON - 功能符、数组关键词、对象关键词、全局关键词简表速查
- 用Three.js构建三维世界的房子
- 手把手教你发布兼容TS的JS库到npmjs上
- POSTGRESQL 15 日志的JSON 格式 为什么用JSON 与 PG 14 没有注意的一些参数
- Python csv、xlsx、json、二进制(MP3) 文件读写基本使用
- JS常见加密 AES、DES、RSA、MD5、SHAI、HMAC、Base64(编码) - Python/JS实现
- JS逆向加密解密工具Crypto Magician、乐易助手、WT-JS 下载使用
- Frida - App逆向 JavaScript代码注入 基本语法以及数据类型介绍
- App逆向案例 X嘟牛 - Frida监听 & WT-JS工具还原(一)
- java调用js脚本语言