前言:

  前段时间刚好使用了百度地图的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,);//// 初始化地图,设置中心点坐标和地图级别 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,); 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,); 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==) {
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":"城市"}}

  

百度地图JavaScript API获取用户当前经纬度和详细地理位置,反之通过详细地理位置获取当前经纬度的更多相关文章

  1. 百度地图JavaScript API经纬度查询-MAP

    百度地图JavaScript API经纬度查询-MAP-ABCDEFGHIJKMHNOPQRSTUVWXYZ: 搜索:<input type="text" size=&quo ...

  2. 百度地图JavaScript API使用

    最近在完成优达学城前端开发(入门)课程的P4项目中,要求调用google地图进行交互,项目已提供部分js代码和html代码.但在申请google地图API密钥时由于网络等原因,打不开或者连接超时,所以 ...

  3. 百度地图JavaScript API覆盖物旋转时出现偏移

    在项目中,调用百度地图JavaScript API,做覆盖物的旋转再添加到地图上,结果出现偏移了. 调试过程中的效果图: 发现图片的旋转并不是按车子的中心来的,而是之外的一个点.最后发现犯了一个很细节 ...

  4. 【百度地图JavaScript API】手机端浏览器定位的实现

    [百度地图JavaScript API]手机端浏览器定位的实现 https://blog.csdn.net/xiao190128/article/details/72579476

  5. 百度地图 JavaScript API 极速版 开发体会

    前段时间百度地图API推出了 JavaScript API 极速版 1.0 简单看了一下,从产品定位来说真是挺好. 把开发人员细分成普通web开发人员和移动web开发人员.正好用到了手机地图这块决定尝 ...

  6. 百度地图Javascript API 调用示例

    调用示例 !<!DOCTYPE html> <html> <head> <title>百度地图DEMO</title> </head& ...

  7. 百度地图JavaScript API自定义覆盖物、自定义信息窗口增删时的显示问题

    项目中,需求:在百度地图上实时画出车辆,并能点击车辆弹出信息框查看实时信息. 实现:通过不停的画覆盖物并删除掉.点击覆盖物时弹出信息窗口. 问题:删除掉覆盖物后信息窗也删除掉了.因为信息窗是建立在覆盖 ...

  8. 百度地图JavaScript API V1.5初级开发工具类

    /** * 百度地图使用工具类-v1.5 * @author boonya * @date 2013-7-7 * @address Chengdu,Sichuan,China * @email boo ...

  9. 百度地图JavaScript API本地搜索的结果面板

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

随机推荐

  1. eclipse c/c++配置

    先下载jdk,如果jdk装的是32位,eclipse也要下载32位的,64位也是一样.我用的是jdk7 64位. 下载eclipse,去官网上下载最新的http://www.eclipse.org/d ...

  2. 洛谷 1984 [SDOI2008]烧水问题

    [题解] 烧开每一杯水之后都用它去把其他没烧开的水焐热,这样显然是最优的.然后推推式子或者列表找规律就好了. #include<cstdio> #include<algorithm& ...

  3. [bzoj3209][花神的数论题] (数位dp+费马小定理)

    Description 背景众所周知,花神多年来凭借无边的神力狂虐各大 OJ.OI.CF.TC …… 当然也包括 CH 啦.描述话说花神这天又来讲课了.课后照例有超级难的神题啦…… 我等蒟蒻又遭殃了. ...

  4. mongodb replica set 添加/删除节点方法--http://www.ii123.com/jc/bc/bczh/258948.html

    replica set多服务器主从,添加,删除节点,肯定会经常遇到的.下面详细说明一下,添加,删除节点的2种方法. 一,利用rs.reconfig,来添加,删除节点 1,添加节点  代码如下   re ...

  5. java虚拟机(一)-java内存区域与内存溢出异常

    1.简述:java虚拟机在执行java程序的过程中,会把他所管理的内存分为以下几个区域, 1.1.程序计数器 1.2.虚拟机栈 1.3.本地方法栈 1.4.java堆 1.5.方法区 如图所示: 2. ...

  6. Maven使用GitHub项目目录搭建远程仓库

    使用GtiHub的项目目录搭建第三方远程仓库,能免除使用服务器搭建Nexus私服,而且空间也是免费的.但是这种方式只适合小规模发布,毕竟搜索和版本控制是一个问题,如果需要更复杂的功能就只能转向Nexu ...

  7. js/jq仿window文件夹移动/剪切/复制等操作

    1.先看下效果吧! 2.在添加一个index.html <!DOCTYPE html> <html lang="en"> <head> < ...

  8. CocoaPods: 制作cocoapods国内镜像

    制作cocoapods国内镜像∞ March 15, 2014 Tags:cocoapods 国内访问cocoapods spec repo速度非常慢,网络不好的话做一次pod update要等半个小 ...

  9. Open Flash Chart图表的JSON格式基本属性详解

    http://blog.csdn.net/wangwenhui11/article/details/4283571 数据文件必须是JSON格式.JSON对象的基本格式: {} 把所有对象都编写在{}里 ...

  10. python字符串截取

    python字符串截取 str = 'abcd' str[0:-1],-1表示末尾开始的位置,但是[]操作符不取尾下标所对应的字符: 所以str[0:-1] ---->‘abc' str[0:1 ...