12.22日总结

地图

1 地理位置

1.1 Geolocation 接口

地理定位在日常生活中应用比较广泛，如互联网打车、在线地图等。

HTML5增加了获取用户地理位置信息的接口》Geolocation，开发者可以通过经纬度来获取用户的地理位置信息。另外，百度等互联网公司也提供了地理定位的接口。

Geolocation 接口是一个用来获取设备地理位置的可编程的对象，它可以让web内容访问到设备的地理位置(经纬度)，这将允许Web应用基于用户的地理位置提供定制的信息。

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

1.2 获取当前地理位置

1.2.1 获取当前位置

使用 getCurrentPosition() 方法来获取设备当前位置。

1.2.2 返回数据

若获取地理位置成功，则 getCurrentPosition() 方法将返回数据对象。对象可能包含的属性如下：

属性	描述
coords.latitude	以十进制度数表示纬度的双精度值。
coords.longitude	以十进制度数表示经度的双精度值。
coords.accuracy	表示纬度和经度属性精度的双精度值，单位为米。
coords.altitude	表示该位置相对于海平面的高度的双经度值。 如果无法提供数据，则此值可以为空。
coords.altitudeAccuracy	表示高度属性精度的双精度值，单位为米。
coords.heading	表示设备运行方向的双精度值。 该值（以度为单位）表示设备离正北方向的距离。0° 表示正北方向，顺时针计算（即东为 90°，西为 270°）。 如果速度为 0，此值为 NaN；如果设备无法提供方向信息，则此值为空。
coords.speed	表示设备运行速度的双精度值，单位为米/每秒。
timestamp	获取到位置的时间（时间戳）。

1.2.3 异常处理

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

可能返回的错误码：

值	相关联的常量	描述
1	PERMISSION_DENIED	地理位置信息的获取失败，因为该页面没有获取地理位置信息的权限。
2	POSITION_UNAVAILABLE	地理位置获取失败，因为至少有一个内部位置源返回一个内部错误。
3	TIMEOUT	获取地理位置超时，通过定义 PositionOptions.timeout 来设置获取地理位置的超时时长。

2 百度地图API

2.1 百度地图的作用

百度地图开放平台是面向广大政府、企业、互联网等开发者开放地图服务的平台。

百度地图开放平台拥有七大基础地图服务开放能力：定位、地图、导航、轨迹、路况、路线规划、搜索，并将七大服务能力开放给各行业开发者使用。

百度地图开放平台目前已覆盖近百个行业领域，主要应用场景有：智能物流、智能穿戴、网约车、车用地图、智能景区等。

2.2 百度地图JavaScript API

百度地图 JavaScript API 是一套由 JavaScript 语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支持 PC 端和移动端基于浏览器的地图应用开发，且支持 HTML5 特性的地图开发。

百度地图 JavaScript API 支持 HTTP 和 HTTPS，免费对外开放，可直接使用。接口使用无次数限制。

官方开发文档：地图 JS API | 百度地图API SDK。

2.3 百度地图开发步骤

我们将以基础的地图展示和地图标注为例，来学习百度地图 JavaScript API 的使用方法。

2.3.1 申请开发密钥

点击链接进入控制台：登录百度帐号。

点击左侧菜单，依次进入：应用管理 → 我的应用，在页面中点击“创建应用”。

2.3.2 返回数据

若获取地理位置成功，则 getCurrentPosition() 方法将返回数据对象。对象可能包含的属性如下：

属性	描述
coords.latitude	以十进制度数表示纬度的双精度值。
coords.longitude	以十进制度数表示经度的双精度值。
coords.accuracy	表示纬度和经度属性精度的双精度值，单位为米。
coords.altitude	表示该位置相对于海平面的高度的双经度值。 如果无法提供数据，则此值可以为空。
coords.altitudeAccuracy	表示高度属性精度的双精度值，单位为米。
coords.heading	表示设备运行方向的双精度值。 该值（以度为单位）表示设备离正北方向的距离。0° 表示正北方向，顺时针计算（即东为 90°，西为 270°）。 如果速度为 0，此值为 NaN；如果设备无法提供方向信息，则此值为空。
coords.speed	表示设备运行速度的双精度值，单位为米/每秒。
timestamp	获取到位置的时间（时间戳）。

2.3.3 异常处理

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

可能返回的错误码：

值	相关联的常量	描述
1	PERMISSION_DENIED	地理位置信息的获取失败，因为该页面没有获取地理位置信息的权限。
2	POSITION_UNAVAILABLE	地理位置获取失败，因为至少有一个内部位置源返回一个内部错误。
3	TIMEOUT	获取地理位置超时，通过定义 PositionOptions.timeout 来设置获取地理位置的超时时长。

3 百度地图 API

3.1 百度地图的作用

百度地图开放平台是面向广大政府、企业、互联网等开发者开放地图服务的平台。

百度地图开放平台拥有七大基础地图服务开放能力：定位、地图、导航、轨迹、路况、路线规划、搜索，并将七大服务能力开放给各行业开发者使用。

百度地图开放平台目前已覆盖近百个行业领域，主要应用场景有：智能物流、智能穿戴、网约车、车用地图、智能景区等。

3.2 百度地图 JavaScript API

百度地图 JavaScript API 是一套由 JavaScript 语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支持 PC 端和移动端基于浏览器的地图应用开发，且支持 HTML5 特性的地图开发。

百度地图 JavaScript API 支持 HTTP 和 HTTPS，免费对外开放，可直接使用。接口使用无次数限制。

官方开发文档：地图 JS API | 百度地图API SDK。

3.3 百度地图开发步骤

我们将以基础的地图展示和地图标注为例，来学习百度地图 JavaScript API 的使用方法。

3.3.1 申请开发密钥

点击链接进入控制台：登录百度帐号。

3.3.2 加载 JavaScript API

新建开发页面，参考使用须知异步加载 JavaScript API，并填入你刚才申请到的 AK（密钥）：

3.3.3 修改初始坐标位置

地图在加载时，需要通过脚本设置地图初始化时的中心点坐标位置，例如示例代码 mp.centerAndZoom(new BMap.Point(121.491, 31.233), 11); 中的 121.491, 31.233。如果需要修改该位置，可以通过坐标拾取器获取目标位置的坐标：

示例代码 mp.centerAndZoom(new BMap.Point(121.491, 31.233), 11); 中的 11 是指地图层级，取值范围 4 ~ 19。层级取值越大，地图比例尺越小。

3.3.4 添加地图控件

初始化后的地图默认是不能进行缩放的，需要自行添加地图控件。

3.3.5 添加标注

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

3.3.6 出行路线规划

百度地图 JavaScript API 提供了驾车、公交、步行和骑行四种出行方式的路线规划功能。

12.22日 拖拽

1 拖放API

1.1 拖放概念

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

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

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

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

2 拖拽事件

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

下面的表格提供了一个简短的事件类型描述：

事件	On 型事件处理程序	触发时刻
drag	ondrag	当拖拽元素或选中的文本时触发。
drop	ondrop	当元素或选中的文本在可释放目标上被释放时触发。
dragenter	ondragenter	当拖拽元素或选中的文本到一个可释放目标时触发。
dragover	ondragover	当元素或选中的文本被拖到一个可释放目标上时触发（每 100 毫秒触发一次）。
dragleave	ondragleave	当拖拽元素或选中的文本离开一个可释放目标时触发。
dragstart	ondragstart	当用户开始拖拽一个元素或选中的文本时触发。
dragend	ondragend	当拖拽操作结束时触发（比如松开鼠标按键或敲 “Esc” 键）。

2.1 设置元素为可拖放

首先，为了使元素可拖动，把 draggable 属性设置为 true

2.2 拖动什么

在上面示例中，ondragstart 属性调用了一个函数 drag(ev)，它规定了被拖动的数据。

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

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

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

2.3 拖动到何处：ondragover

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

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

这要通过调用 ondragover 事件的 event.preventDefault() 方法

2.4 进行放置 ondrop

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

在上面的例子中，ondrop 属性调用了一个函数 drop(event)

12.22日 localStorage sessionStorage

1 Web Storage 介绍

1.1 Web Storage 介绍

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足日益更新的需求，会经常性地在设备上存储本地数据，例如记录历史活动信息。传统方式使用 document.cookie 来进行存储，但是由于其存储的空间只有 4KB 左右，并且需要复杂的操作进行解析，给发开者带来诸多不便。

HTML5 的本地存储解决方案中定义了两个重要的API：Web Storage 和本地数据库 Web SQL Database。接下来我们将重点讲述 Web Storage 的基本用法。

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

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

1.2 Web Storage 的特点

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

• 容量较大，sessionStorage 约 5M，localStorage 约 20M。

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

2 LocalStorage 的使用

localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

不管是 localStorage，还是 sessionStorage，可使用的 API 方法和属性都相同：

方法和属性	描述
setItem(key, value)	该方法接收一个键名和值作为参数，将会把键值对添加到存储中，如果键名已存在，则更新其对应的值。
getItem(key)	该方法接收一个键名作为参数，返回键名对应的值。
removeItem(key)	该方法接收一个键名作为参数，并把该键名和值从存储中删除。
length	类似数组的 length 属性，用于访问 Storage 对象中 item 的数量。
key(n)	用于访问第 n 个 key 的名称。
clear()	清除当前域下的所有键值对。

3 sessionStorage 的使用

sessionStorage 方法针对一个 session（会话）进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

4 简单的网站列表程序

功能需求：

• 可以输入网站名、网址，以网站名作为 key 存入 localStorage；

• 可以输入网站名，查找网址；

• 可以列出当前已保存的所有网站。