• 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 { 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一样

  • 相关阅读:
    java作用域public ,private ,protected 及不写时的区别
    JAVA的静态变量、静态方法、静态类
    栈内存 堆内存
    java
    数组 bash shell
    SYN Cookie的原理和实现
    Python 时间 time
    sysctl命令详解
    lvs
    软件工程概论个人作业01
  • 原文地址:https://www.cnblogs.com/lvxisha/p/9766321.html
Copyright © 2020-2023  润新知