# H5 的地理定位（JS 对象来实现定位）
使用场景（LBS 环境中：local based services）基于本地服务的应用中：
- 社交（近场服务）陌陌 、微信摇一摇
- 导航软件：高德、百度地图、凯立德、腾讯地图，滴滴打车
- 生活服务类：外卖软件、订票、旅游
- 健康类的应用：跑步，咕咚，悦跑圈，keep
以上服务获取用户位置可以划分为两大类：
- 只需要获取一次用户位置 1，3 类似于延时器（只执行一次）
- 要不断的获取用户位置 2，4 类似于定时器（要不断的执行）
# navigator.geolocation 对象下的 3 个方法
-
一次性位置
1
2
3
4
5
6
7
8
9
10
| 语法：navigator.geolocation.getCurrentPosition(获取成功的函数，获取失败后的函数，配置对象);
navigator.geolocation.getCurrentPosition(function(res){
},function(err){
},{
});
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
coords：坐标
--经度: coords.longitude
--纬度: coords.latitude
--准确度: coords.accuracy(以米为单位)
--海拔: coords.altitude （GPS支持）
--海拔准确度: coords.altitudeAcuracy （GPS支持）
--行进方向: coords.heading （GPS支持）
--地面速度: coords.speed （GPS支持）
--时间戳: position.timestamp 获取位置的时间
--失败编号: code
-- 0 : 不包括其他错误编号中的错误，比如用户拒绝了权限
-- 1 : 用户拒绝浏览器获取位置信息
-- 2 : 尝试获取用户信息,但失败了
-- 3 : 设置了timeout值,获取位置超时了
|
-
连续性位置
类似于定时器，会不断的获取用户信息。
1
2
3
| var pos=navigator.geolocation.watchPosition(获取成功的函数，获取失败后的函数，配置对象);
navigator.geolocation.clearWatch(pos)
|
使用方式同 getCurrentPosition, 只是在配置对象中多了个属性：
1
| frequency更新的频率，表示多少时间请求一次，有点类似于定时器的时间间隔
|
获取经纬度后转为实际地址的第三方工具：https://www.bejson.com/convert/map/（可以用百度地图转）
# 学习百度地图 API 实现各种地图场景
首页：http://lbsyun.baidu.com/
JS 文档页：http://lbsyun.baidu.com/index.php?title=jspopular
开发者秘钥 API 申请入口：http://lbsyun.baidu.com/apiconsole/key?application=key
地图示例：http://lbsyun.baidu.com/jsdemo.htm
通过搜狐接口获取当前 IP 地址：https://pv.sohu.com/cityjson
# 地理位置实例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#show{
border: 1px solid red;
padding: 10px;
}
</style>
</head>
<body>
<button>获取位置</button>
<p>您的位置如下：</p>
<div id="show">
</div>
<script>
var btn=document.getElementsByTagName("button")[0];
btn.onclick=function(){
// console.log(navigator.geolocation)
navigator.geolocation.getCurrentPosition(function(res){
//res参数是一个对象，该对象是获取成功后的所有的信息，比如经纬度，海拔，行进方向等等
console.log(res)
// 将位置信息输出到HTML中
var box=document.getElementById("show");
box.innerHTML+="经度是："+res.coords.longitude+"<br>";
box.innerHTML+="纬度是："+res.coords.latitude+"<br>";
box.innerHTML+="准确度是："+res.coords.accuracy+"<br>";
box.innerHTML+="海拔是："+res.coords.altitude+"<br>";
box.innerHTML+="海拔准确度是："+res.coords.altitudeAccuracy+"<br>";
box.innerHTML+="行进方向是："+res.coords.heading+"<br>";
box.innerHTML+="速度是："+res.coords.speed+"<br>";
box.innerHTML+="定位时间是："+new Date().toLocaleString(res.coords.timestamp)
},function(err){
// 如果位置获取失败，则会执行该函数，err表示的就是执行失败后返回的那个对象，可以通过该对象得到具体的失败原因
// console.log(err);
switch (err.code) {
case 0:
// statements_1
alert("您一定是拒绝了位置服务，请你打开手机设置，允许定位服务。");
break;
case 1:
alert("您主动拒绝了获取位置，请重试，并点击允许按钮");
break;
case 2:
alert("我已经很努力获取你的位置，但是失败了，请再试一次呗");
break;
case 4:
alert("获取超时，稍后再试");
break;
default:
// statements_def
alert("这是什么鬼");
break;
}
},{
//配置对象，可以设置更具体的参数
/*
-- enableHighAcuracy : 更精确的查找 , 默认false
-- timeout : 获取位置允许最长时间 , 默认infinty
-- maximumAge : 位置可以缓存的最大时间 , 默认 0
*/
enableHighAcuracy:true,
timeout:1000,
maximumAge:0
});
}
</script>
</body>
</html>
|
# 百度地图应用实例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}
#allmap{height:500px;width:100%;}
#r-result{width:100%; font-size:14px;}
</style>
<!-- 1、将秘钥改为你自己的申请的秘钥 -->
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=YhgdX9V4DTAIepL8XHcMFkVYEvd4zzkv"></script>
<title>城市名定位</title>
</head>
<body>
<div id="allmap"></div>
<div id="r-result">
经度: <input id="longitude" type="text" style="width:100px; margin-right:10px;" />
纬度: <input id="latitude" type="text" style="width:100px; margin-right:10px;" />
<input type="button" value="查询" onclick="theLocation()" />
</div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var map = new BMap.Map("allmap");
// Popint(经度，纬度)
map.centerAndZoom(new BMap.Point(116.331398,39.897445),11);
map.enableScrollWheelZoom(true);
// 用经纬度设置地图中心点
function theLocation(){
if(document.getElementById("longitude").value != "" && document.getElementById("latitude").value != ""){
map.clearOverlays();
var new_point = new BMap.Point(document.getElementById("longitude").value,document.getElementById("latitude").value);
var marker = new BMap.Marker(new_point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
map.panTo(new_point);
}
}
</script>
|
