地理定位
在H5中增加了地理用户API，可以利用位置开发基于用户位置的应用
获取位置的方式
通过IP地址获取
每个地方都可以使用IP地址，但是IP地址定位不精确
GPS
好处是，定位精确，但是耗电大，定位时间长
WIFI-手机信号定位
好处是精确度高，但是无法定位，非信号覆盖地区
浏览器定位接口
定位属于用户个人隐私，必须由用户同意之后才可以允许定位功能的使用
定位API
navigator.geolocation
这个API由各个浏览器厂家自己实现，需要处理兼容性问题
getCurrentPosition(获取位置成功回调函数，获取位置失败回调函数，参数设置);
成功回调
成功之后默认传入一个数据参数
这个参数是获取到的地理信息的对象
coords
latitude：经度
longitude：纬度
accuracy：精度
altitude：海拔高度
function success(data){
data.coords.latitude;//
data.coords.longitude;
}
失败回调
失败之后默认传入一个数据参数
这个参数是获取到错误的信息
error
PERMISSION_DENIED:用户拒绝定位请求
POSITION_UNAVABLE：定位信息不可用
TIMEOUT：请求超时
UNKNOW_ERROR：未知错误
function success(err){
}
参数设置
anableHighAccuracy:是否使用高精度，true/false
timeout：设置超时时间，单位ms
maximumAge：设置浏览器重新获取地理信息的时间间隔，单位ms
注意
我们不能直接获取地理信息，我们需要通过第三方接口（百度地图）去获取
使用百度地图接口实现地理信息获取
进入百度地图开放平台，选择JavaScriptAPI，选择符合功能的样式
得到源代码（以下代码摘自百度开放平台）
<!DOCTYPE html>
<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,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
<title>个性化地图</title>
</head>
<body>
<div id="allmap"></div>显示地图
</body>
</html>
JavaScript代码
<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>
网友评论