h5新增属性

一、地理位置

百度地图的JavaScript API接口：http://lbsyun.baidu.com/index.php?title=jspopular

demo接口网址　http://lbsyun.baidu.com/index.php?title=jspopular

获取地理定位的

     // 地理定位获取使用方法
	// 方法：可以获取位置
	// window.navigator.geolocation.getCurrentPosition(成功的函数，失败的函数);

地理定位的两个属性：

position.coords.latitude//纬度
position.coords.longitude//经度

下面例子是地理位置的使用方式：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>地理定位</title>
</head>
<body>
	<script>
		// 地理定位
		// 方法：可以获取位置
		// window.navigator.geolocation.getCurrentPosition(成功的函数，失败的函数);
		/*
			参数1：函数：定位成功后就执行
			参数2： 函数：定位失败后执行
有时间获取不到地理位置
		*/
		window.navigator.geolocation.getCurrentPosition(function (position) {
			// 如果获取定位成功，则打印一个对象
			console.log(position);
			console.log(position.coords.latitude);//打印出当前的维度
			console.log(position.coords.longitude);//经度

			// 如果获取到经纬度，就可以获取位置
		},function(msg){
			// 无法获取，此时执行的是这个
			console.log(msg);//如果定位失败，请打印失败的相关信息
		});
	</script>
</body>
</html>

　　通过百度地图的JavaScript---API去获取接口查看百度地图的demo，如下获取百度地图以及当前个人的位置：

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

<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>
<script type="text/javascript">
	// 地理定位
	window.navigator.geolocation.getCurrentPosition(function (position) {
			var lat = position.coords.latitude();//纬度
			var lon = position.coords.longitude();//经度

			// 百度地图API功能
			var map = new BMap.Map("allmap");

			// 经纬度---地图中的经纬度
			var point = new BMap.Point(lon, lat);
			map.centerAndZoom(point, 15);
			
			//创建小狐狸
			var pt = new BMap.Point(lon, lat);//小狐狸的经纬度
			var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/fox.gif", new BMap.Size(300,157));
			var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 创建标注
			map.addOverlay(marker2);              // 将标注添加到地图中

		},function (msg) {
			console.log(msg);
	});
</script>

　　更多效果，，百度地图的JavaScript API接口：网址　http://lbsyun.baidu.com/index.php?title=jspopular （需要把经纬度换下即可实现效果）

// 获取实时地理信息
		window.navigator.geolocation.watchPosition(function (position) {
			// 成功时执行
			console.log(position.coords.accuracy);//精确位置
			var aa = position.coords.accuracy;//精确位置
		},function(msg) {
			// 失败时执行
			console.log(msg);
		});

　　本地存储（localStorage，sessionStorage）、cookie（浏览器）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>本地存储</title>
</head>
<body>
	<script>
		// sessionStorage
		/*设置值：属性名字和值*/
		window.sessionStorage.setItem('name','lxs');
		window.sessionStorage.setItem('age','222');
		// 数据已经存储

		// 获取数据:出入属性名字，得到该属性的值
		var name = window.sessionStorage.getItem('name');
		var age = window.sessionStorage.getItem('age');
		console.log(name+','+age);

window.sessionStorage.removeItem('age');
// 数据共享：同一个窗口数据共享

	// 清空数据
	window.sessionStorage.clear();

	</script>
</body>
</html>

//给键，通过 removeItem移除这个键对应的值
window.sessionStorage.removeItem('age');

localstorage的用法与sessionStorage一样

posted on 2018-10-10 14:49 婧星阅读(173) 评论(0) 收藏举报

刷新页面返回顶部

h5新增属性

导航

公告