地理位置 百度地图 拖拽 web储存

2.1 Geolocation 接口

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

返回数据

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

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

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

 百度地图Api

    <script>
            // 初始化地图
            function initialize() {  
              var map = new BMap.Map('map');  
              map.centerAndZoom(new BMap.Point(121.491, 31.233), 11);  
            }  
            
            // 加载 JavaScript API
            function loadScript() {  
              var script = document.createElement("script");  
              script.src = "https://api.map.baidu.com/api?v=2.0&ak=mETWRRt2iKZmAomVO0WhohX32tPGTUtC&callback=initialize";
              document.body.appendChild(script);
            }
            
            window.onload = loadScript;
        </script>

添加控件

 map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
  map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
  map.addControl(new BMap.OverviewMapControl()); // 添加缩略图控件

拖拽

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

把元素设置成可拖放 把 draggable 属性设置为 true

拖放到何处 - ondragover

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

进行放置 - ondrop

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

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

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

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