HTML5的新特性--基础知识（6）
2017-03-06 10:04
405 查看
拖放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" onclick="btnAdd_click()" value="保存" />
<input type="button" id="showAll" onclick="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.onload=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>
两个存储系统：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" onclick="btnAdd_click()" value="保存" />
<input type="button" id="showAll" onclick="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.onload=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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML5基础知识一、新特性解读
- HTML5的新特性--基础知识（3）
- HTML5的新特性--基础知识（1）
- HTML5基础知识汇总_(2)自己定义属性及表单新特性
- HTML5基础知识汇总_(2)自定义属性及表单新特性
- HTML5的新特性--基础知识（2）
- HTML5基础知识汇总_(2)自定义属性及表单新特性
- HTML5基础知识整理（二）—— 新特性
- html5基础知识
- 关于HTML5的一些基础知识
- 黑马程序员之基础加强之IDE基础知识和Java5新特性
- html5基础知识
- HTML5 基础知识，第 1 部分
- 黑马程序员----------java基础知识之JDK5.0新特性总结
- C++基础知识（五）C++的一些特性
- 基础知识之11g新特性用extended statistics 解决列相关性
- html5 css3基础知识
- 无需编程知识，Wix让你零基础打造HTML5页面
- 无需编程知识，Wix让你零基础打造HTML5页面
- html5 canvas基础特性