html_地理信息与本地存储

最新推荐文章于 2022-05-25 18:01:21 发布

星宇非凡

最新推荐文章于 2022-05-25 18:01:21 发布

阅读量223

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/weixin_42595216/article/details/101228829

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

地理位置
经度 : 南北极的连接线
纬度 : 东西连接的线

位置信息从何而来
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>

星宇非凡

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html_地理信息与本地存储

地理位置经度 : 南北极的连接线纬度 : 东西连接的线位置信息从何而来IP地址GPS全球定位系统Wi-Fi无线网络基站地理位置对象navigator.geolocation单次定位请求：getCurrentPosition(请求成功，请求失败，数据收集方式)请求成功函数经度 : coords.longitude纬度 : coords.latitu...
复制链接

扫一扫

专栏目录