小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
Geolocation（地理定位），用于获取用户位置的信息；
在H5规范中，增加获取用户地理定位信息的API，我们可以发送一个位置信息的请求，用户同意后，浏览器会返回一个包含经度和维度的位置信息！那么我们可以基于用户位置开发互联网应用，即基于位置服务；
了解获取位置的方式：
- IP地址：任何能上网的电脑都可以，不够精确
- GPS：精准，但是时间长，耗电。
- WiFi：精准，但在乡村接入点少
- 手机信号：相当精准，但需要能够访问手机设备等
- 用户自定义：可能不够精准，特别是当用户位置改变。
注意： 浏览器是自动选择定位方式，我们无法设置； 浏览器默认地理位置为私密信息，所以浏览器会弹出一个请求，是否用户允许获取位置。
语法：
navigator.geolocation.getCurrentPosition(successCallback,errorCallback,option);
navigator.geolocation.getCurrentPosition(success,error,option); 第一个参数:success;获取当前地理信息成功时的回调 第二个参数:error;获取当前地理信息失败时的回调 第三个参数:option;可以设置获取数据的方式,如: enableHighAccuracy:true/false;表示是否使用高精度 timeout:设置超时时间,单位ms; maximumAge:可以设置浏览器重新获取地理信息的时间间隔,单位也时ms; 如:
navigator.geolocation.getCurrentPosition(showPosition,showError,{
enableHighAccuracy:true,
timeout:3000,
});
成功获取定位后的回调 当获取地理信息成功时, getCurrentPosition() 方法会返回一个对象,这个地理信息对象,会通过参数传递给成功后的回调,如下position就是代表获取成的地理信息对象
function showPosition(position){
div.innerHTML="Latitude:" + position.coords.latitude ;
}
注意：这个返回的地理信息对象会有一个坐标信息，对应很多属性:
coords.latitude 十进制数的纬度
coords.longitude 十进制数的经度
coords.accuracy 位置精度
coords.altitude 海拔，海平面以上以米计
coords.altitudeAccuracy 位置的海拔精度
coords.heading 方向，从正北开始以度计
coords.speed 速度，以米/每秒计
timestamp 响应的日期/时间
失败获取定位时回调,也会有一个对象，如下error
function showError(error){
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML="用户拒绝对获取地理位置的请求。"
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="位置信息是不可用的。"
break;
case error.TIMEOUT:
x.innerHTML="请求用户地理位置超时。"
break;
case error.UNKNOWN_ERROR:
x.innerHTML="未知错误。"
break;
}
}
错误代码： Permission denied - 用户不允许地理定位 Position unavailable - 无法获取当前位置 Timeout - 操作超时
代码：
script type="text/javascript">
var div =document.getElementsClassName("demo")[0];
function getLocation(){
// 能力测试,看是否支持或者用户是否允许;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition,showError,{});
}else{
x.innerHTML = "Geolocation is not supported by this browser";
}
}
function showPosition(position){
div.innerHTML="Latitude:" + position.coords.latitude + "<br/> Longitude:" + position.coords.longitude;
}
function showError(error){
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML="用户拒绝对获取地理位置的请求。"
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="位置信息是不可用的。"
break;
case error.TIMEOUT:
x.innerHTML="请求用户地理位置超时。"
break;
case error.UNKNOWN_ERROR:
x.innerHTML="未知错误。"
break;
}
}
</script>
当既然我们个人无法获取地理信息，我们可以通过第三方的接口API来获取，如百度地图，谷歌地图; 例子：借助百度地图提供的接口，来实现当前地理定位： 可以查看：百度地图开放平台
很多都写好了 注意:一般需要密钥，即授权码
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<!DOCTYPE html>
<html>
<head>
<title>普通地图&全景图</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<style type="text/css">
body, html{width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
#panorama {height: 50%;overflow: hidden;}
#normal_map {height:50%;overflow: hidden;}
</style>
</head>
<body>
<div id="panorama"></div>
<div id="normal_map"></div>
<script type="text/javascript">
//全景图展示
var panorama = new BMap.Panorama('panorama');
panorama.setPosition(new BMap.Point(120.320032, 31.589666)); //根据经纬度坐标展示全景图
panorama.setPov({heading: -40, pitch: 6});
panorama.addEventListener('position_changed', function(e){ //全景图位置改变后，普通地图中心点也随之改变
var pos = panorama.getPosition();
map.setCenter(new BMap.Point(pos.lng, pos.lat));
marker.setPosition(pos);
});
//普通地图展示
var mapOption = {
mapType: BMAP_NORMAL_MAP,
maxZoom: 18,
drawMargin:0,
enableFulltimeSpotClick: true,
enableHighResolution:true
}
var map = new BMap.Map("normal_map", mapOption);
var testpoint = new BMap.Point(120.320032, 31.589666);
map.centerAndZoom(testpoint, 18);
var marker=new BMap.Marker(testpoint);
marker.enableDragging();
map.addOverlay(marker);
marker.addEventListener('dragend',function(e){
panorama.setPosition(e.point); //拖动marker后，全景图位置也随着改变
panorama.setPov({heading: -40, pitch: 6});}
);
</script>
</body>
</html>
