获取用户精准地理位置信息（百度地图）

获取用户精准地理位置信息步骤：

1.通过 navigator.geolocation.getCurrentPosition(showPosition, showError); 方法获取经纬度；

2.使用百度地图坐标转换接口（http://api.map.baidu.com/geoconv/v1/?coords=114.21892734521,29.575429778924&from=1&to=5&ak=你的密钥）转换经纬度；百度地图官方文档：http://lbsyun.baidu.com/index.php?title=webapi/guide/changeposition

3.使用百度地图逆地理编码服务接口（http://api.map.baidu.com/geocoder/v2/?callback=renderReverse&location=35.658651,139.745415&output=json&pois=1&ak=您的ak）将坐标点（经纬度）转换为对应位置信息（如所在行政区划，周边地标点分布）；百度地图官方文档：http://lbsyun.baidu.com/index.php?title=webapi/guide/webservice-geocoding-abroad

* 注意两个接口填写的经纬度的顺序不一样：

坐标转换接口：经度在前，纬度在后（经度，纬度）；逆地理编码：纬度在前，经度在后（纬度，经度）

示例代码：注意引入jQuery文件

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 6     <title>HTML5获取地理位置定位信息</title>
 7     <meta name="keywords" content="html5,地理位置"/>
 8 </head>
 9 <body>
10
11 <div class="demo">
12     <p>地理坐标：<br/><span id="latlon"></span></p>
13     <div class="geo">
14         <p>百度地图定位位置：</p>
15         <p id="baidu_geo"></p>
16     </div>
17 </div>
18
19 <script type="text/javascript" src="js/jquery.min.js"></script>
20 <script>
21     function getLocation() {
22         if (navigator.geolocation) {
23             navigator.geolocation.getCurrentPosition(showPosition, showError);
24         } else {
25             alert("浏览器不支持地理定位...");
26         }
27     }
28
29     function showPosition(position) {
30         $("#latlon").html("纬度:" + position.coords.latitude + '，经度:' + position.coords.longitude);
31         // 坐标转换：经度在前，纬度在后（经度，纬度）
32         // 逆地理编码：纬度在前，经度在后（纬度，经度）
33         var latlon = position.coords.longitude + ',' + position.coords.latitude;
34         var changeLatlon = '';
35         // 百度地图坐标转换
36         var changeUrl = 'http://api.map.baidu.com/geoconv/v1/?coords=' + latlon + '&from=1&to=5&ak=lRRyy6qoBwnAgj3w4ugGFqoSsWC8du3v';
37         $.ajax({
38             type: "GET",
39             dataType: "jsonp",
40             url: changeUrl,
41             success: function (json) {
42                 if (json.status == 0) {
43                     $.each(json.result,function (i,v) {
44                         // 逆地理编码：纬度在前，经度在后
45                         changeLatlon = v.y + ',' + v.x;
46                     });
47                     //百度地图逆地理编码
48                     var url = "http://api.map.baidu.com/geocoder/v2/?ak=lRRyy6qoBwnAgj3w4ugGFqoSsWC8du3v&callback=renderReverse&location=" + changeLatlon + "&output=json&pois=0";
49                     $.ajax({
50                         type: "GET",
51                         dataType: "jsonp",
52                         url: url,
53                         beforeSend: function () {
54                             $("#baidu_geo").html('正在定位...');
55                         },
56                         success: function (json) {
57                             if (json.status == 0) {
58                                 $("#baidu_geo").html(json.result.formatted_address);
59                             }
60                         },
61                         error: function (XMLHttpRequest, textStatus, errorThrown) {
62                             $("#baidu_geo").html(changeLatlon + "的地址位置获取失败");
63                         }
64                     });
65                 }
66             },
67             error: function (XMLHttpRequest, textStatus, errorThrown) {
68                 alert("坐标转换失败");
69             }
70         });
71     }
72
73     // 定位失败 传 默认地址
74     function showError(error) {
75         switch (error.code) {
76             case error.PERMISSION_DENIED:
77                 alert("定位失败,用户拒绝请求地理定位");
78                 break;
79             case error.POSITION_UNAVAILABLE:
80                 alert("定位失败,位置信息不可用");
81                 break;
82             case error.TIMEOUT:
83                 alert("定位失败,请求获取用户位置超时");
84                 break;
85             case error.UNKNOWN_ERROR:
86                 alert("定位失败,定位系统失效");
87                 break;
88         }
89     }
90
91     getLocation();
92
93 </script>
94 </body>
95 </html>

-----------------------------------------END---------------------------------------

转载于:https://www.cnblogs.com/crf-Aaron/p/8962868.html

获取用户精准地理位置信息（百度地图）相关推荐

通过百度地图API获取用户所在地理位置信息
目录 1.密匙申请 2.源代码 3.结果展示 1.密匙申请使用以下源码前,请先去百度地图开发平台申请密匙,前去申请:立即申请 2.源代码此次定位代码是通过H5的方式实现的 <html> ...
手机端获取用户详细地理位置（高德地图API）
项目开发需要获取用户详细的地理位置信息,使用了高德地图API接口 1,注册高德地图开发者账号获取开发者Key 2,页面调用 1 <script type="text/javascrip ...
利用IP地址获取用户的地理位置信息
最近酷乐在项目中遇到一个需要获取用户IP信息并查询出用户地理位置信息的需求,代码如下: 1.首先获取用户具体的IP信息. <?php function getClientIp(){if (get ...
手机端或PC端利用高德地图和腾讯地图获取用户当前位置信息
目录一.简介二.高德地图三.腾讯地图四.总结一.简介最近在项目中,有需要使用到获取用户当前地理位置信息的功能,获取当前用户位置保存到数据库中的场景,并且需要支持多种地图定位方式,我这里采用 ...
如何获取用户的地理位置-浏览器地理位置(Geolocation)API 简介
如何获取用户的地理位置-浏览器地理位置(Geolocation)API 简介一.总结一句话总结:Geolocation API(地理位置应用程序接口)提供了一个可以准确知道浏览器用户当前位置的方法 ...
使用淘宝IP库获取用户ip地理位置
为什么80%的码农都做不了架构师?>>> 以前用过GOOGLE地图和百度地图获取过用户地理位置,现在又多了一个方法,那就是使用淘宝IP库获取用户ip地理位置,一起来看代码吧. ...
赚四五百万，一款打卡作弊软件的 CEO 被判5年6个月！因破坏了钉钉系统获取用户真实地理位置...
‍ ‍上面这个公号,是我的一个备用号,平时我也会发一些很短.很生活的图片.文字,也会推荐看到的好书.节目.电影等. 1 发现商机昨天看到这个案例,蛮唏嘘的,特别对于我们技术人创业来讲,也算是提了一个 ...
微信小程序结合腾讯位置服务获取用户所在城市信息
背景实现小程序进去后获取用户当前所在城市,然后显示该城市的数据,并且显示在导航栏和 Tab上. 微信小程序中,我们可以通过调用wx.getLocation()获取到设备当前的地理位置信息,这个信息是 ...
【微信小程序腾讯位置服务】获取用户所在城市信息实战
背景实现小程序进去后获取用户当前所在城市,然后显示该城市的数据,并且显示在导航栏和 Tab上. 微信小程序中,我们可以通过调用wx.getLocation()获取到设备当前的地理位置信息,这个信息是 ...

获取用户精准地理位置信息（百度地图）

获取用户精准地理位置信息（百度地图）相关推荐

最新文章

热门文章