拖放API:
两个存储系统:localStorage和sessionStorage
localStorage多个标签访问同一个网站,各个标签都可以看到保存的数据
storage事件:存储空间每次发生变化时,都会触发这个事件。所以可以通过这个事件通知同一程序的每个窗口。目前主要是在Safari浏览器中兼容比较好。
语法:window.addEventListener('storage',updateNum,false);
Geolocation:在h5中提供的一组地理定位,最早是Google提出的
Geolocation API用于将用户当前地理位置信息共享给信任的站点
Geolocation API位于navigator对象中,只有3个方法:
getCurrentPosition():获取当前位置
watchPosition():
clearWatch():主要是清除watchPosition
getCurrentPosition的核心内容:
语法:navigator.geolocation.getCurrentPosition(success_callback,error_callback,{geolocation选项})
function success_callback(){//获取位置成功后的操作}
function error_callback(error){//获取位置失败后的操作,error为自动传入,错误对象有error.code(获取错误编号)和error.message(获取错误的详细信息)}
是一个回调函数
参数:
success_callback:用户允许共享geolocation的回调
error_callback:获取地理位置失败的回调,传入错误对象,包含code(错误编号),message(错误信息)属性
选项:enableHighAccuracy:是否更精确读取经纬度,默认false
获取成功时:position属性有
coords:
latitude:当前位置的纬度
longitude:当前位置的经度
altitude:海拔,海平面以上以米计
speed:速度,以米/秒计
例:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title> New Document </title>
<style>
</style>
<script>
function $(id){
return document.getElementById(id);
}
//获取数据添加到localStorage中
function btnAdd_click(){
var key=$("txtFirstName").value;
var val=$("txtLastName").value;
localStorage.setItem(key,val);
window.alert("保存成功");
}
function showAll_click(){
//length获取已保存数据的数量
var length=localStorage.length;
var html="";
for(var i=0;i<length;i++){
//通过索引找到key:key(index)
var key=localStorage.key(i);
var val=localStorage.getItem(key);
html+="<tr><td>"+key+"</td><td>"+val+"</td></tr>";
$("tBody").innerHTML=html;
}
}
</script>
</head>
<body>
key:<input id="txtFirstName" /><br/>
val:<input id="txtLastName" /><br/>
<input type="button" id="btnAdd" οnclick="btnAdd_click()" value="保存" />
<input type="button" id="showAll" οnclick="showAll_click()" value="显示所有" />
<table border="1px">
<thead>
<tr>
<th>Key</th>
<th>Val</th>
</tr>
<thead>
<tbody id="tBody"></tbody>
</table>
</body>
</html>
例:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title> New Document </title>
<style>
</style>
<script>
window.οnlοad=function(){
var geo=navigator.geolocation;
geo.getCurrentPosition(function(position){
//获取定位信息成功时,执行的操作
//position:获取定位信息的对象,包含属性coords
//coords:latitude(纬度),longitude(经度),altitude(海拔高度,单位为米),speed(当前行驶速度)
var lat=position.coords.latitude;
var lon=position.coords.longitude;
console.log("纬度:"+lat+"经度"+lon);
},function(error){
//获取定位信息失败时,执行的操作
//属性code:错误编号
//属性message:错误信息
console.log("错误编号"+error.code);
console.log("错误信息"+error.message);
});
}
</script>
</head>
<body>
</body>
</html>
首先申请使用百度开发者,就能申请百度密钥(ak),这样就能用API
http://developer.baidu.com/map/
百度地图API:
构造函数:Map("containerId")
var map=new BMap.Map("allmap");
定位显示城市及缩放比例:
centerAndZoom(point/cityName,level)如:map.centerAndZoom("北京市",12);
启动鼠标滚轮更改显示比例:enableScrollWheelZoom(true)
添加缩放平移控件:addControl(new BMap.NavigationControl());
添加比例尺:addControl(new BMap.ScaleControl());
导入地图操作代码:
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=HbUVYMUg6PwbOnXkztdgSQlQ">
</script>
我注册的百度开发者ak:
4agS27TTVDx5CnKXYgP7bkftsPGphN03
获取当前设备的地理位置:Geolocation对象
var geolocation=new BMap.Geolocation();
通过getCurrentPosition事件,传递position参数获取当前位置
geolocation.getCurrentPosition(function(position,error){})
getStatus()判断获取地理信息的状态,状态码由百度地图API提供,共有8个
BMAP_STATUS_SUCCESS表示检索用户地理位置成功,对应值"0"
通过position参数获取当前设备的地理位置
position.point:表示当前地理坐标对象
position.point.lng:当前位置经度
position.point.lat:当前位置的纬度
Marker(point):创建覆盖物即标点
map.addOverlay(marker):将覆盖物添加到地图上
map.panTo(point):将地图中心点移动到指定点上
例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=HbUVYMUg6PwbOnXkztdgSQlQ"></script>
<script>
window.onload = function(){
//得到百度地图, 并且显示在allmap中
var map = new BMap.Map("allmap");
//设置显示的中心点城市以及缩放比例
map.centerAndZoom("北京市",12);
//启用滚轮更改显示比例
map.enableScrollWheelZoom(true);
//创建缩放平移控件
var nc = new BMap.NavigationControl();
//将缩放平移控件添加到地图上
map.addControl(nc);
//添加比例尺控件
map.addControl(new BMap.ScaleControl());
//获取地理位置 : 通过 百度 Geolocation 对象
var geolocation = new BMap.Geolocation();
//通过geolocation 获取用户当前位置 : getCurrentPosition
geolocation.getCurrentPosition(function(position){
//position 表示已获取的地理位置信息对象
//position.point : 表示当前地理位置坐标点(包含经纬度)
//position.point.lng : 表示当前的经度
//position.point.lat : 表示当前的纬度
if(this.getStatus() == BMAP_STATUS_SUCCESS){
//如果正确获取到信息(检索成功)
var lng = position.point.lng;
var lat = position.point.lat;
console.log("经度:" + lng + ",纬度:" + lat);
//创建 Marker 即覆盖物 , position.point 就是当前位置的点 类型为BMap.Point
var marker = new BMap.Marker(position.point);
//将marker添加到地图上 addOverlay(marker);
map.addOverlay(marker);
//将地图的中心移动到 position.point处
map.panTo(position.point);
//定位中鼎大厦
var coder = new BMap.Geocoder();
//通过getPoint方法,进行地理定位
coder.getPoint("中鼎大厦",function(point){
var newMar = new BMap.Marker(point);
map.addOverlay(newMar);
//将中心移至point处
map.centerAndZoom(point,16);
});
}
});
}
</script>
</head>
<body>
<div id="allmap" style="width:400px;height:300px;border:1px solid black;"></div>
</body>
</html>