地理位置
经度 : 南北极的连接线
纬度 : 东西连接的线
位置信息从何而来
IP地址
GPS全球定位系统
Wi-Fi无线网络
基站
地理位置对象
navigator.geolocation
单次定位请求 :getCurrentPosition(请求成功,请求失败,数据收集方式)
请求成功函数
经度 : coords.longitude
纬度 : coords.latitude
准确度 : coords.accuracy
海拔 : coords.altitude
海拔准确度 : coords.altitudeAcuracy
行进方向 : coords.heading
地面速度 : coords.speed
时间戳 : new Date(position.timestamp)
地理位置对象_2
navigator.geolocation
请求失败函数
失败编号 :code
0 : 不包括其他错误编号中的错误
1 : 用户拒绝浏览器获取位置信息
2 : 尝试获取用户信息,但失败了
3 : 设置了timeout值,获取位置超时了
数据收集 : json的形式
enableHighAcuracy : 更精确的查找,默认false
timeout : 获取位置允许最长时间,默认infinity
maximumAge : 位置可以缓存的最大时间,默认0
地理位置对象_3
navigator.geolocation
多次定位请求 : watchPosition(像setInterval)
移动设备有用,位置改变才会触发
配置参数:frequency 更新的频率
关闭更新请求 : clearWatch(像clearInterval)
百度地图API
<script src="http://api.map.baidu.com/api?v=1.3"></script>
本地存储
Cookie
数据存储到计算机中,通过浏览器控制添加与删除数据
Cookie的特点
存储限制
域名100个cookie,每组值大小4KB
客户端、服务器端,都会请求服务器(头信息)
页面间的cookie是共享
Storage
sessionStorage
session临时回话,从页面打开到页面关闭的时间段
窗口的临时存储,页面关闭,本地存储消失
localStorage
永久存储(可以手动删除数据)
Storage的特点
存储量限制 ( 5M )
客户端完成,不会请求服务器处理
sessionStorage数据是不共享、 localStorage共享
Storage API
setItem():
设置数据,key\value类型,类型都是字符串
可以用获取属性的形式操作
getItem():
获取数据,通过key来获取到相应的value
removeItem():
删除数据,通过key来删除相应的value
clear():
删除全部存储的值
例子 : 保存注册信息
存储事件:
当数据有修改或删除的情况下,就会触发storage事件
在对数据进行改变的窗口对象上是不会触发的
Key : 修改或删除的key值,如果调用clear(),key为null
newValue : 新设置的值,如果调用removeStorage(),key为null
oldValue : 调用改变前的value值
storageArea : 当前的storage对象
url : 触发该脚本变化的文档的url
注:session同窗口才可以,例子:iframe操作
例子 : 同步购物车
<script>
//LBS : 基于地图信息的应用
window.onload = function(){
var oInput = document.getElementById('input1');
var oT = document.getElementById('t1');
oInput.onclick = function(){
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 );
navigator.geolocation.clearWatch(timer);
},{
enableHighAcuracy : true,
timeout : 5000,
maximumAge : 5000
});
};
};
</script>
<body>
<input type="button" value="请求" id="input1" /><br />
<textarea id="t1" style="width:400px; height:400px; border:1px #000 solid;">
</textarea>
</body>
<script src="http://api.map.baidu.com/api?v=1.3"></script>
<script>
window.onload = function(){
var oInput = document.getElementById('input1');
oInput.onclick = function(){
navigator.geolocation.getCurrentPosition(function(position){
var y = position.coords.longitude;
var x = position.coords.latitude;
var map = new BMap.Map("div1");
var pt = new BMap.Point(y, x);
map.centerAndZoom(pt, 14);
map.enableScrollWheelZoom();
var myIcon = new BMap.Icon("miaov.png", new BMap.Size(30,30));
var marker2 = new BMap.Marker(pt,{icon:myIcon}); // 创建标注
map.addOverlay(marker2);
var opts = {
width : 200, // 信息窗口宽度
height: 60, // 信息窗口高度
title : "妙味课堂" // 信息窗口标题
}
var infoWindow = new BMap.InfoWindow("IT培训机构", opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow,pt); //开启信息窗口
});
};
};
</script>
<body>
<input type="button" value="请求" id="input1" />
<div id="div1"></div>
</body>
//storage
<script>
window.onload = function(){
var aInput = document.getElementsByTagName('input');
aInput[0].onclick = function(){
//sessionStorage : 临时性存储
//localStorage : 永久性存储
//window.sessionStorage.setItem('name',aInput[3].value);
window.localStorage.setItem('name',aInput[3].value);
};
aInput[1].onclick = function(){
//alert(window.sessionStorage.getItem('name'));
alert(window.localStorage.getItem('name'));
};
aInput[2].onclick = function(){
window.localStorage.removeItem('name');
//window.localStorage.clear(); //删除全部数据
};
};
</script>
<body>
<input type="button" value="设置" />
<input type="button" value="获取" />
<input type="button" value="删除" />
<input type="text" />
</body>
<script>
window.onload = function(){
var aInput = document.getElementsByTagName('input');
var oT = document.getElementById('t1');
if( window.localStorage.getItem('name') ){
aInput[0].value = window.localStorage.getItem('name');
}
if( window.localStorage.getItem('sex') ){
for(var i=1;i<aInput.length;i++){
if( aInput[i].value == window.localStorage.getItem('sex') ){
aInput[i].checked = true;
}
}
}
if( window.localStorage.getItem('ta') ){
oT.value = window.localStorage.getItem('ta');
}
window.onunload = function(){
if( aInput[0].value ){
window.localStorage.setItem('name', aInput[0].value);
}
for(var i=1;i<aInput.length;i++){
if( aInput[i].checked == true ){
window.localStorage.setItem('sex', aInput[i].value);
}
}
if( oT.value ){
window.localStorage.setItem('ta', oT.value);
}
};
};
</script>
<body>
<p>
用户名:<input type="text" />
</p>
<p>
性别 : <input type="radio" value="男" name="sex" />男
<input type="radio" value="女" name="sex" />女
</p>
内容 : <textarea id="t1">
</textarea>
</body>
<script>
window.onload = function(){
var aInput = document.getElementsByTagName('input');
aInput[0].onclick = function(){
window.localStorage.setItem('name',aInput[3].value);
};
aInput[1].onclick = function(){
alert(window.localStorage.getItem('name'));
};
aInput[2].onclick = function(){
window.localStorage.removeItem('name');
};
window.addEventListener('storage',function(ev){ //当前页面的事件不会触发
//alert(123);
console.log( ev.key );
console.log( ev.newValue );
console.log( ev.oldValue );
console.log( ev.storageArea );
console.log( ev.url );
},false);
};
</script>
<body>
<input type="button" value="设置" />
<input type="button" value="获取" />
<input type="button" value="删除" />
<input type="text" />
</body>
<script>
window.onload = function(){
var aInput = document.getElementsByTagName('input');
for(var i=0;i<aInput.length;i++){
aInput[i].onclick = function(){
if(this.checked){
window.localStorage.setItem('sel',this.value);
}
else{
window.localStorage.setItem('onSel',this.value);
}
};
}
window.addEventListener('storage',function(ev){ //当前页面的事件不会触发
if( ev.key == 'sel' ){
for(var i=0;i<aInput.length;i++){
if( ev.newValue == aInput[i].value ){
aInput[i].checked = true;
}
}
}
else if( ev.key == 'onSel' ){
for(var i=0;i<aInput.length;i++){
if( ev.newValue == aInput[i].value ){
aInput[i].checked = false;
}
}
}
},false);
};
</script>
<body>
<input type="checkbox" value="香蕉" />香蕉<br />
<input type="checkbox" value="苹果" />苹果<br />
<input type="checkbox" value="西瓜" />西瓜<br />
<input type="checkbox" value="哈密瓜" />哈密瓜<br />
</body>