12.22知识点梳理

地理位置

在h5中增加了获取用户地理位置信息的接口geolocation。开发者可以通过经纬度来获取用户的地理位置信息。

geolocation接口

它是一个用来获取设备地理位置的可编程对象。

鉴于该特性可能侵犯用户的隐私，除非用户统一，否则用户位置信息是不可用的。

获取当前位置

getCurrentPosition（）方法来获取设备当前位置。

timeout：xx秒     超时时间

返回数据

若获取地理位置成功，则getcurrentpodition（）方法将返回数据对象。

coords.latitude -以十进制度表示纬度的双精度值。

coords.longitude -以十进制度表示经度的双精度值。

coords.accuracy -表示纬度和经度属性精度的双精度值，单位为米

coords.alttude -表示该位置相对于海平面的高度的双经度值。如果无法提供数据，则此值可以为空。

coords.altitudeAccuracy -表示高度属性精度的双精度值，单位为米。

coords.heading -表示设备运行方向的双精度值。

该值（以度为单位）表示设备离正北方向的距离，“0”表示正北方向，顺时针计算（即东为90°，西为270°）

如果速度为0，此值为NaN，如果设备无法提供方向信息，则此值为空。

coords.speed -表示设备运行速度的双精度值，单位为米/每秒。

timestamp -获取带位置的时间（时间戳）

手机比电脑获取的经纬度更准确

异常处理

getCurrentPosition（）方法的第二个参数用于处理错误。它规定获取地理位置失败或用户拒绝定位时运行的函数。

PERMISSION_DENIED -地理位置信息的获取失败，因为该页面没有获取地理位置信息的权限。

POSITION_UNAVAILABLE -地理位置获取失败，因为至少有一个内部位置源返回一个内部错误。

TIMEOUT -获取地理位置超时，通过定义positionoptions.timeout来设置获取地理位置的超时时长。

添加地图控件

所有控件的基类是control

添加标注

可以使用map.addverlay方法向地图添加标注，并向地图中添加信息窗口。

拖拽

拖放（drag and drop）接口使应用程序能够在浏览器中使用拖放功能。

用户可以使用鼠标选择可拖拽（draggable）元素，将元素拖拽到可放置（droppable）元素，并释放鼠标按钮以放置这些元素。

拖拽操作期间，会有一个可拖拽元素的半透明快照跟随这鼠标指针。

拖放的概念

拖放

拖放的概念：拖放是h5标准的组成部分，是页面中的元素从初始位置被拖动到新的位置的用户行为，如拖拽页面中的指定元素到另一个元素中。

拖放过程：首先使用鼠标指针进入源对象，然后按住鼠标左键拖动源对象，当移动鼠标时源对象会跟随鼠标指针移动，如果对象进入了目标对象，就松开鼠标左键让源对象放置在目标对象中。

源对象：表示被拖动的元素。为元素添加draggable属性可以设置此元素为源对象。

目标对象：源对象进入的元素称作目标对象，目标对象可以使页面中的任一元素。

拖拽事件

drag&drop 使用了DOM event model 以及从mouse events继承而来的drag events

用户选中一个可拖拽的（draggable）元素，并将其拖拽（鼠标不放开）到一个可放置的（droppable）元素，然后释放鼠标。在操作期间，会触发一些事件类型，有一些事件类型可能会被多次触发（比如 drag 和 dragover 事件类型）。

事件     On型事件处理程序         触发时刻

drag     ondrag    当拖拽元素或选中的文本时触发

drop    ondrop    当元素或选中的文本在可释放目标被释放时触发

dragenter  ondragenter 当拖拽元素或选中的文本到一个可释放目标时触发

dragover   ondragover 当元素或选中的文本被拖到一个可释放目标上时触发（每100毫秒触发一次）

dragleave ondragleave 当拖拽元素或选中的文本离开一个可释放目标时触发

dragstart ondragstart  当用户开始拖拽一个元素或选中的文本时触发

dragend ondragend  当拖拽操作结束时触发（比如松开鼠标按键或qiao“Esc“键）

当从操作系统向浏览器中拖拽文件时，不会触发dragstart 和dragend

设置元素为可拖放

使元素可拖动：draggable：true；

拖动什么- ondragstart 和setData（）

ondragstart属性调用了一个函数drag（ev），它规定了被拖动的数据

DataTransfer对象专门用来存储拖放时要携带的数据，它可以被设置为拖放事件对象的dataTransfer属性

dataTransfer.setData()方法设置被拖数据的数据类型和值

text/plain是一个DOMString，表示要添加到drap object的拖动数据的类型。值是可拖动元素的id

拖放到何处-ondragover

ondragover事件规定在何处放置被拖动的数据。

无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

这里要通过调用ondragover事件的event.preventDefaule（）方法；

进行放置-ondrop

当放置被拖数据时，会发生drop事件。

web storage

web storage 和本地数据库web SQL Database

localStorage：用于长久保存整个网站的数据，保存的数据没有期限，直到手动去除。（存储本地的数据）

sessionStorage：用于临时保存同一窗口（或标签页）的数据，在关闭窗口（或标签页）之后将会删除这些数据。

（把数据临时保存在会话中，关闭窗口后就删除数据。）

webStorage的特点

设置数据和读取数据比较方便

容量较大，sessionStorage约5M,localStorage约20M

只能存储字符串，如果要存储JSON对象，可以使用window.JSON对象的stringify（）方法和parse（）方法进行序列化和反序列化。

localStorage的使用

localStorage对象存储的数据没有时间限制。

localStorage，sessionStorage可用的API方法和属性都相同

方法和属性                   描述

setltem（key，value）  该方法接收一个键名和值作为参数，将会吧键值对添加到存储中，如果键名已存在，则更新其对应的值。

getltem（key）        该方法接收一个键名作为参数，返回键名对应的值。

removeltem（key） 该方法接收一个键名作为参数，并把该键名和值从存储中删除。

length                       类似数组的length属性，用于访问Storage对象中item的数量。

key（n）                  用于访问第n个key的名称

clear（）                 清除当前域下的所有键值对。