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

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

前言:

  前段时间刚好使用了百度地图的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":"城市"}}
目录
打赏
0
0
0
0
196
分享
相关文章
|
8月前
|
API
国外地区经纬度查询免费API接口教程
此接口用于查询国外地区的经纬度信息,支持POST和GET请求方式。需提供用户ID、用户KEY、省级名称及具体地点。返回数据包括地区名称(中英文)、国家代码及经纬度等详细信息。示例请求与响应数据详见文档。
286 29
如何使用基站查询API帮你解析地理位置?
随着“新基建”战略推进,我国已建成全球领先的移动通信网络。基于基站数据的LBS定位服务成为各行业数字化转型的重要工具。探数平台基站查询API整合三大运营商数据,提供高精度、低延迟的地理位置查询服务,广泛应用于位置推荐、物流追踪等领域。本文详细介绍该API的核心功能、返回字段及调用流程,并通过Python示例展示使用方法。未来,随着5G和AI技术发展,基站定位将迈向厘米级精度,赋能自动驾驶、工业物联网等前沿领域,助力开发者抢占位置经济的战略高地。
247 1
使用 Node.js、Express 和 React 构建强大的 API
本文详细介绍如何使用 Node.js、Express 和 React 构建强大且动态的 API。从开发环境搭建到集成 React 前端,再到利用 APIPost 高效测试 API,适合各水平开发者。内容涵盖 Node.js 运行时、Express 框架与 React 库的基础知识及协同工作方式,还涉及数据库连接和前后端数据交互。通过实际代码示例,助你快速上手并优化应用性能。
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
盘点原生JS中目前最没用的几个功能API
在JavaScript的发展历程中,许多功能与API曾风光无限,但随着技术进步和语言演化,部分功能逐渐被淘汰或被更高效的替代方案取代。例如,`with`语句使代码作用域复杂、可读性差;`void`操作符功能冗余且影响可读性;`eval`函数存在严重安全风险和性能问题;`unescape`和`escape`函数已被`decodeURIComponent`和`encodeURIComponent`取代;`arguments`对象则被ES6的剩余参数语法替代。这些变化体现了JavaScript不断优化的趋势,开发者应紧跟技术步伐,学习新技能,适应新技术环境。
84 10
深入浅出:使用Node.js构建RESTful API
在这个数字时代,API已成为软件开发的基石之一。本文旨在引导初学者通过Node.js和Express框架快速搭建一个功能完备的RESTful API。我们将从零开始,逐步深入,不仅涉及代码编写,还包括设计原则、最佳实践及调试技巧。无论你是初探后端开发,还是希望扩展你的技术栈,这篇文章都将是你的理想指南。
深入浅出Node.js:从零开始构建RESTful API
在数字化时代的浪潮中,后端开发作为连接用户与数据的桥梁,扮演着至关重要的角色。本文将引导您步入Node.js的奇妙世界,通过实践操作,掌握如何使用这一强大的JavaScript运行时环境构建高效、可扩展的RESTful API。我们将一同探索Express框架的使用,学习如何设计API端点,处理数据请求,并实现身份验证机制,最终部署我们的成果到云服务器上。无论您是初学者还是有一定基础的开发者,这篇文章都将为您打开一扇通往后端开发深层知识的大门。
146 12
|
8月前
|
API
全国行政区划代码与经纬度查询免费API接口教程
该接口提供全国各行政区划代码及经纬度查询服务。通过POST或GET请求,输入用户ID、KEY及地点名称,可获取地区代码、省份、市级、区县级名称及经纬度等信息。示例URL:https://cn.apihz.cn/api/other/xzqhdm.php?id=88888888&key=88888888&sheng=北京&place=北京。返回数据包含状态码、信息提示及查询结果。
1133 14
深入浅出Node.js:从零开始构建RESTful API
在数字化时代的浪潮中,后端开发如同一座灯塔,指引着数据的海洋。本文将带你航行在Node.js的海域,探索如何从一张白纸到完成一个功能完备的RESTful API。我们将一起学习如何搭建开发环境、设计API结构、处理数据请求与响应,以及实现数据库交互。准备好了吗?启航吧!

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问