HTML5之地理信息

来源：互联网发布：高校综合数据分析平台编辑：程序博客网时间：2024/04/30 11:54

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

//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>

</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>

</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

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>

</body>

0 0