欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

获取用户精准地理位置信息(百度地图)

程序员文章站 2023-08-26 13:02:14
获取用户精准地理位置信息步骤: 1.通过 navigator.geolocation.getCurrentPosition(showPosition, showError); 方法获取经纬度; 2.使用百度地图坐标转换接口(http://api.map.baidu.com/geoconv/v1/?c ......

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

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---------------------------------------