H5获取用户位置API + 百度地图API介绍
一. Geolocaiton API 功能介绍
Geolocation接口是一个用来获取设备地理位置的可编程的对象,它可以让Web内容访问到设备的地理位置,这将允许Web应用基于用户的地理位置提供定制的信息.
出于安全考虑,当一个Web页尝试获取地理位置信息时, 会请求用户批准地理位置访问权限, 每个浏览器都有自己请求用户批准该权限的策略和方法.
二. Geolocation API 使用说明
Geolocation API是通过window.navigator.geolocation获取地理定位的访问的,该对象有以下三个方法:
1、 getCurrentPosition()
1.1 语法
navigator.geolocation.getCurrentPosition(success,error,options)
1.2 参数说明
参数1.success:
必选参数,其作用是获取地理位置信息成功后返回执行的回调函数.
参数2.error:
可选参数,作用是获取地理位置信息异常或失败时执行的回调函数.
参数3.options:
可选参数,作用是添加一些可选参数设置
1.3 代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>地理定位</title>
</head>
<body>
<script>
//获取当前地理信息
window.navigator.geolocation.getCurrentPosition(success,error);
//获取地理信息成功时的回调函数
function success(position) {
alert("成功获取您的地理信息");
//获取经度维度信息
//coords属性
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
//打印纬度,经度信息
console.log(latitude);
console.log(longitude);
}
//获取地理信息失败时的回调函数
function error(msg) {
alert("获取您的地理信息失败");
}
</script>
</body>
</html>
上述代码中,在获取地理位置信息成功时的回调函数中,可以传递pos这个参数对象,通过该参数对象,可以获得当前用户访问Web页面时的地理位置信息.
pos
对象包含一个coords
属性,该属性表示一系列的地理位置信息:
latitude
: 以十进制数表示的纬度longitude
:以十进制数表示的经度altitude
:位置相对于椭圆球面的高度accuracy:
以米为单位的纬度和经度坐标的精度水平altitudeAccuracy
:以米为单位的高度坐标精度水平heading
: 运动的方向,通过相对正北做顺时针旋转的角度指定.speed
:以米/秒为单位的设备当前地面速度
2. watchPosition() 和 clearWatch()
2.1 方法说明watchPosition
和 clearWatch
是一对方法,其原理和setInterval,setTimeout方法相同, watchPositon方法会返回一个唯一标识,clearWatch可通过这个唯一标识清楚watchPosition方法的监听.
2.2 语法watchPosition()
的语法和getCurrentPosition()
一模一样,同样可以传入三个参数:
参数1.success:
必选参数,其作用是获取地理位置信息成功后返回执行的回调函数.
参数2.error:
可选参数,作用是获取地理位置信息异常或失败时执行的回调函数.
参数3.options:
可选参数,作用是添加一些可选参数设置
三.使用百度地图获取API接口
3.1 百度地图API简介
百度地图API是为开发者免费提供的一套基于百度地图服务的应用接口,包括JavaScript API、Web服务API、Android SDK、iOS SDK、定位SDK、车联网API、LBS云等多种开发工具与服务,提供基本地图展现、搜索、定位、逆/地理编码、路线规划、LBS云存储与检索等功能,适用于PC端、移动端、服务器等多种设备,多种操作系统下的地图应用开发。
- 百度地图开放平台地址:http://lbsyun.baidu.com/
3.2 JavaScript API 操作步骤
- 申请秘钥
为了统一平台服务的配额管理,JavaScript API在新版本引入ak机制。JavaScript API v1.4及以前版本无须申请**(ak),自v1.5版本开始需要先申请秘钥(ak),才可使用,如需获取更高配额,可申请认证企业用户。
申请秘钥的流程十分简单,和注册一个账号类似,只需要填入姓名,手机,和邮箱进行验证即可.
- 选择Demo
百度地图API提供了一系列的功能,你可以根据需求选择对应的Demo,即可查看该Demo的API文档.
- 引入JavaScript代码
在API文档中,可以在源代码编辑器中查看该Demo对应JavaScript代码,你只需要复制该JavaScript代码到您的代码编辑器中,添加
我的小demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Geolocation</title>
<style type="text/css">
html,body {
height: 100%
}
body {
margin: 0;
padding: 0;
}
#container {
height: 100%
}
</style>
</head>
<body>
<div id="container"></div>
<!-- 引入百度javascript版 API -->
<script src="http://api.map.baidu.com/api?v=2.0&ak= **"></script>
<script>
/*h5 geolocation */
if(navigator.geolocation){
<!--在桌面浏览器使用geolocation会遇到网络阻塞问题 (国内政策)
PositionError {code: 2, message: "Network location provider at 'https://www.googleapis.com/' : No response received."}
在移动端是完全可以的
-->
navigator.geolocation.getCurrentPosition(function (position) {
/*获取定位成功回调函数*/
/*定位数据*/
console.log(position);
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
// console.log(latitude,longitude);
// 这些都是写死
var map = new BMap.Map("container"); // container表示显示哪个容器
// 把经度纬度传给百度
/*40.1691162668,116.6348530780*/
var point = new BMap.Point(longitude, latitude);
//默认的比例
map.centerAndZoom(point, 20);
//添加鼠标滚动缩放
map.enableScrollWheelZoom();
// 只写上面三行就可出现地图了,并且会定位
// 定义好了一个图片标记
var myIcon = new BMap.Icon("1.png", new BMap.Size(128, 128));
// 创建标注
var marker = new BMap.Marker(point, {icon: myIcon});
map.addOverlay(marker);
//点击地图,获取经纬度坐标
map.addEventListener("click",function(e){
console.log("经度坐标:"+e.point.lng+" 纬度坐标:"+e.point.lat);
});
}, function (error) {
/*获取定位失败回调函数*/
/*失败原因*/
console.log(error)
});
}
</script>
</body>
</html>