获取用户精准地理位置信息步骤:
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---------------------------------------
更多专业前端知识,请上 【猿2048】www.mk2048.com