一、Geolocation
1、简介
Geolocation用于获取用户当前的地理位置信息,该对象保存在navigator对象中,地理位置信息属于用户隐私,浏览器不会直接允许访问,当我们需要获取用户位置信息时,浏览器会弹出询问框,如果选择允许则可以获取地理位置信息
2、获取位置信息
语法:
-获取用户当前位置
navigator.geolocation.getCurrentPosition(请求成功后调用的函数,请求失败后调用的参数,{geolocation配置信息})
-第一个参数是请求成功后所需调用的函数
-第二个参数时请求失败后所需调用的函数
-配置信息,可选参数,支持三个参数
-enableHighAccuracy:表示是否高精确度可用,取值为布尔值
-timeout:表示等待相应的最大时间,单位为毫秒,默认是0,表示一直等下去
-maximumAge:表示缓存时间,表示多少毫秒内,不去获取新位置
请求成功后返回的内容
当请求成功后,会返回一个position对象(成功函数的参数),包含以下内容:
-coords.latitude 纬度
-coords.longitude 经度
-coords.accuracy 位置精度
-coords.speed 速度
-coords.heading 方向
-coords.altitude 海拔
百度地图API
1、集成
步骤:
1)成为百度开发者
2)创建应用,获取key
3)引入百度地图api
4)初始化地图对象:地图需要依赖于html元素
5)设置地图中心坐标
6)显示地图
2、添加控件
百度地图上可以对地图进行操作的一些工具,比如放大缩小、定位等
百度地图API提供的有
1)NavigationControl:地图平移司陪房控件,可以用于移动和缩放地图。
2)ScaleControl:比例尺
3、获取位置信息
通过百度Geolocation对象获取
4、地址解析
根据具体地址得到经纬度
LBS:
Location Base Service(基于位置的服务)
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<!-- 引入百度地图api -->
<script src="http://api.map.baidu.com/api?v=2.0&ak=dPP9WMeCrm7FKDHvsgg4XZcs2XMZaCeZ"></script>
<style>
#bMap{
width: 400px;
height: 400px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="bMap"></div>
<script>
// 初始化地图对象,创建地图实例
var map = new BMap.Map("bMap");
// 创建点坐标
var point = new BMap.Point(116.62073,36.948604);
// 设置中心点坐标和缩放比例:数字越大,看到的区域越小,信息越详细
// map.centerAndZoom(point,16);
// 添加控件
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
// 获取地理位置
// 初始化geolocation对象
var geo = new BMap.Geolocation();
//获取用户当前位置
geo.getCurrentPosition(function(p) {
console.log(p);
// 打印获取到的位置信息
console.log(p.address.city);
console.log(p.longitude)
});
// 地址解析
// 创建地址解析器实例
var gc = new BMap.Geocoder();
// 根据地址得到经纬信息:第一个参数表示要解析的具体地址,第二个参数是解析成功后调用的函数(回调函数)
gc.getPoint("禹城市德州科技职业学院",function(p){
console.log(p);//解析地址后得到的经纬度信息
map.centerAndZoom(p,20);
// 将得到的点信息添加到地图上
map.addOverlay(new BMap.Marker(point));
});
</script>
</body>
</html>