HTML5之地理信息
HTML5之地理信息
l 地理位置
• 经度 : 南北极的连接线
• 纬度 : 东西连接的线
l 位置信息从何而来
• IP地址
• GPS全球定位系统
• Wi-Fi无线网络
• 基站
l 地理位置对象
• navigator.geolocation
l 单次定位请求 ：getCurrentPosition(请求成功，请求失败，数据收集方式)
l 请求成功函数
l 经度 : coords.longitude
l 纬度 : coords.latitude
l 准确度 : coords.accuracy
l 海拔 : coords.altitude
l 海拔准确度 : coords.altitudeAcuracy
l 行进方向 : coords.heading
l 地面速度 : coords.speed
l 时间戳 : new Date(position.timestamp)
l 地理位置对象_2
• navigator.geolocation
l 请求失败函数
l 失败编号 ：code
l 0 : 不包括其他错误编号中的错误
l 1 : 用户拒绝浏览器获取位置信息
l 2 : 尝试获取用户信息，但失败了
l 3 : 设置了timeout值，获取位置超时了
l 数据收集 : json的形式
l enableHighAcuracy : 更精确的查找，默认false
l timeout : 获取位置允许最长时间，默认infinity
l maximumAge : 位置可以缓存的最大时间，默认0
<script>
//LBS : 基于地图信息的应用
window.onload = function(){
var oInput= document.getElementById('input1');
var oT =document.getElementById('t1');
oInput.onclick= function(){
//单次定位请求 ：getCurrentPosition(请求成功，请求失败，数据收集方式)
navigator.geolocation.getCurrentPosition(function(position){// 请求成功函数
oT.value+= '经度:' + position.coords.longitude+'\n';
oT.value+= '纬度 :' + position.coords.latitude+'\n';
oT.value+= '准确度 :' + position.coords.accuracy+'\n';
oT.value+= '海拔 :' + position.coords.altitude+'\n';
oT.value+= '海拔准确度 :' + position.coords.altitudeAcuracy+'\n';
oT.value+= '行进方向 :' + position.coords.heading+'\n';
oT.value+= '地面速度 :' + position.coords.speed+'\n';
oT.value+= '时间戳:' + new Date(position.timestamp)+'\n';
},function(err){//失败函数
//err.code// 失败所对应的编号
alert(err.code );
},{//数据收集方式json的形式
enableHighAcuracy: true,
timeout: 5000,
maximumAge: 5000
});
};
};
</script>
</head>
<body>
<input type="button" value="请求" id="input1" /><br/>
<textarea id="t1"style="width:400px; height:400px; border:1px #000 solid;">
</textarea>
</body>
l 地理位置对象_3
• navigator.geolocation
– 多次定位请求 : watchPosition(像setInterval)
» 移动设备有用，位置改变才会触发
» 配置参数：frequency 更新的频率
– 关闭更新请求 : clearWatch(像clearInterval)
window.onload = function(){
var oInput= document.getElementById('input1');
var oT = document.getElementById('t1');
var timer = null;
oInput.onclick= function(){
timer= navigator.geolocation.watchPosition(function(position){
oT.value+= '经度:' + position.coords.longitude+'\n';
oT.value+= '纬度 :' + position.coords.latitude+'\n';
oT.value+= '准确度 :' + position.coords.accuracy+'\n';
oT.value+= '海拔 :' + position.coords.altitude+'\n';
oT.value+= '海拔准确度 :' + position.coords.altitudeAcuracy+'\n';
oT.value+= '行进方向 :' + position.coords.heading+'\n';
oT.value+= '地面速度 :' + position.coords.speed+'\n';
oT.value+= '时间戳:' + new Date(position.timestamp)+'\n';
},function(err){
//err.code// 失败所对应的编号
alert(err.code );
navigator.geolocation.clearWatch(timer);//关闭更新请求
},{
enableHighAcuracy: true,
timeout: 5000,
maximumAge: 5000,
frequency: 1000
});
};
};
</script>
</head>
<body>
<input type="button" value="请求" id="input1" /><br/>
<textarea id="t1"style="width:400px; height:400px; border:1px #000 solid;">
</textarea>
</body>
百度地图API
<scriptsrc="http://api.map.baidu.com/api?v=1.3"></script>
创建基于地图的应用
主要读懂百度地图API，根据提供的案例进行修改
<style>
#div1{ width:400px; height:400px; border:1px #000solid;}
</style>
<scriptsrc="http://api.map.baidu.com/api?v=1.3"></script>//引入百度地图API
<script>
window.onload = function(){
var oInput= document.getElementById('input1');
oInput.onclick= function(){
navigator.geolocation.getCurrentPosition(function(position){//得到当前位置的经度，纬度
vary = position.coords.longitude;
varx = position.coords.latitude;
varmap = new BMap.Map("div1");//创建图片对象，把图片生成到DIV中
varpt = new BMap.Point(y, x);//获取到地理位置
map.centerAndZoom(pt,14);//位置传到地图的层级上，层级越高，显示越全面
map.enableScrollWheelZoom();
varmyIcon = new BMap.Icon("miaov.png", new BMap.Size(30,30));//自定义图标
varmarker2 = new BMap.Marker(pt,{icon:myIcon}); // 创建标注
map.addOverlay(marker2);//标注点放到层级上
//设置图标大小
varopts = {
width : 200, // 信息窗口宽度
height: 60, // 信息窗口高度
title : "妙味课堂" // 信息窗口标题
}
varinfoWindow = new BMap.InfoWindow("IT培训机构", opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow,pt);//开启信息窗口
});
};
};
</script>
</head>
<body>
<input type="button" value="请求" id="input1" />
<div id="div1"></div>
</body>