Question

地理位置

• 经度 : 南北极的连接线
• 纬度 : 东西连接的线
• 位置信息从何而来
  • IP 地址
  • GPS 全球定位系统
  • Wi-Fi 无线网络
  • 基站
• avigator.geolocation
  • 单次定位请求 ： getCurrentPosition (请求成功，请求失败，数据收集方式)
  • 请求成功函数
    • 经度 : coords.longitude
    • 纬度 : coords.latitude
    • 准确度 : coords.accuracy
    • 海拔 : coords.altitude
    • 海拔准确度 : coords.altitudeAcuracy
    • 行进方向 : coords.heading
    • 地面速度 : coords.speed
    • 请求的时间: new Date(position.timestamp)
  • 请求失败函数
    • 失败编号 ： code
      • 0 : 不包括其他错误编号中的错误
      • 1 : 用户拒绝浏览器获取位置信息
      • 2 : 尝试获取用户信息，但失败了
      • 3 : 设置了 timeout 值，获取位置超时了
  • 数据收集 : json 的形式
    • enableHighAcuracy : 更精确的查找，默认 false
    • timeout : 获取位置允许最长时间，默认 infinity
    • maximumAge : 位置可以缓存的最大时间，默认 0
  • 多次定位请求* : watchPosition
    • 移动设备有用，位置改变才会触发
    • 配置参数： frequency 更新的频率
    • 关闭更新请求 : clearWatch

• examp01 getCurrentPosition

<button id="btn">请求位置信息</button>
<div id="box"></div>

var btn = document.getElementById("btn");
var box = document.getElementById("box");

btn.onclick = function(){
navigator.geolocation.getCurrentPosition(function(position){
box.innerHTML +="经度："+position.coords.longitude + "<br>";
box.innerHTML +="纬度："+position.coords.latitude + "<br>";
box.innerHTML +="海拔："+position.coords.accuracy + "<br>";
box.innerHTML +="海拔的准确度："+position.coords.altitudeAccuracy + "<br>";
box.innerHTML +="地面速度"+position.coords.speed + "<br>";
box.innerHTML +="行进方向"+position.coords.heading + "<br>";
box.innerHTML +="请求时间"+new Date(position.timestamp) + "<br>";
},function(err){
alert(err.code);
},{
enableHighAccuracy:false,//精确请求
timeout:5000,//设置超时
maximumAge:1000//缓存时间
});
}

在线演示

• examp02

var btn = document.getElementById("btn");
var box = document.getElementById("box");

btn.onclick = function(){
navigator.geolocation.watchPosition(function(position){
box.innerHTML +="经度："+position.coords.longitude + "<br>";
box.innerHTML +="纬度："+position.coords.latitude + "<br>";
box.innerHTML +="海拔："+position.coords.accuracy + "<br>";
box.innerHTML +="海拔的准确度："+position.coords.altitudeAccuracy + "<br>";
box.innerHTML +="地面速度"+position.coords.speed + "<br>";
box.innerHTML +="行进方向"+position.coords.heading + "<br>";
box.innerHTML +="请求时间"+new Date(position.timestamp) + "<br>";
},function(err){
alert(err.code);
},{
enableHighAccuracy:false,//精确请求
timeout:5000,//设置超时
maximumAge:1000//缓存时间
});
}

在线演示

• example03 高德地图应用

#container {
    width:600px; 
    height: 300px;
    margin:40px auto;
    border:1px solid red;
}

<div id="container"></div>  
<script type="text/javascript" 
src="http://webapi.amap.com/maps?v=1.3&key=278b7b8b4728ba302b7e566fc2a97b36">
</script>

var map = new AMap.Map('container');

在线演示

• examp04 搜索城市

#container {width:500px; height:500px; margin:100px auto;}  
.menu{
width:100px;
box-shadow: 0 0 5px #000;
margin:auto;
background:#fff;
}
.menu ul li{
list-style:none;
line-height:30px;
text-align:center;
cursor:pointer;
}
#box{
width:400px;
height:40px;
position:absolute;
top:150px;
left:50%;
margin-left:-200px;
background:#fff;
box-shadow:0 0 10px #000;
}
input{
height:38px;
width:300px;
border:none;
outline:none;
}
#btn{
width:80px;
}

<div id="container"></div> 
<div id="box">
<input type="text" id="city" placeholder="请输入城市...">
<input type="button" value="搜索" id="btn">
</div>
<script type="text/javascript" 
src="http://webapi.amap.com/maps?v=1.3&key=278b7b8b4728ba302b7e566fc2a97b36">
</script>

var btn = document.getElementById("btn");
var city = document.getElementById("city");
var map = new AMap.Map('container');
var toolBar,mouseTool,contextMenu;
//在地图中添加操作 toolBar 插件、mouseTool 插件
map.plugin(["AMap.ToolBar","AMap.MouseTool"],function(){
toolBar = new AMap.ToolBar();
map.addControl(toolBar);
mouseTool = new AMap.MouseTool(map);
});
var menuContext = document.createElement("div");
menuContext.innerHTML = "<div class=menu><ul><li onclick='zoomMenu(0)'>缩小</li>
<li onclick='zoomMenu(1)'>放大</li>
<li onclick='distanceMeasureMenu()'>距离量测</li>
<li onclick = 'addMarkerMenu()'>添加标记</li></ul></div>";
//创建一个自定义的右键菜单
contextMenu = new AMap.ContextMenu({isCustom:true,content:menuContext});
//给地图绑鼠标右键功能弹出右键菜单
AMap.event.addListener(map,"rightclick",function(e){
contextMenu.open(map,e.lnglat);//e.lnglat 鼠标点击的经纬度
contextMenuPosition = e.lnglat;
})
//右键菜单缩放地图
function zoomMenu(n){
if(n === 0){map.zoomOut();}
if(n === 1){map.zoomIn();}
contextMenu.close();
}
contextMenu.close();
//测量距离功能
function distanceMeasureMenu(){
mouseTool.rule();
contextMenu.close();
}
//添加标注功能
function addMarkerMenu(){
mouseTool.close();
var marker = new AMap.Marker({
map: map,
position: contextMenuPosition, //基点位置
offset: {x:-5,y:-10} //相对于基点位置
});
contextMenu.close();
}
//搜索城市
btn.onclick = function(){
var val = city.value;
map.setCity(val);
}

在线演示

本地存储

• 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 操作