Geolocation
Geolocation 是 geography location 的簡(jiǎn)稱(chēng)，就是常說(shuō)的地理位置。
HTML5 引用了地理位置 API，但大家回憶一下自己使用一個(gè)站點(diǎn)的經(jīng)歷，應(yīng)該會(huì)有印象，網(wǎng)站會(huì)有詢問(wèn)信息，問(wèn)是否允許使用。
地理位置信息屬于用戶的隱私，未經(jīng)同意是不可以使用的。
使用 HTML 5 提供的地理位置信息 API，主要是 navigator.geolocation 下面的 getCurrentPosition 這個(gè)方法。
getCurrentPosition 返回地理位置對(duì)象，里面包含 coords 屬性。
coords 屬性也是個(gè)對(duì)象，它包含 latitude 和 longitude 兩個(gè)值。
<head> <script> function getLocation() { var x = document.getElementById("position"); if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML = "該瀏覽器不支持獲取地理位置。"; } } function showPosition(position) { var x = document.getElementById("position"); x.innerHTML = `緯度: ${position.coords.latitude} <br>經(jīng)度: ${position.coords.longitude}`; } </script> <noscript>您的瀏覽器不支持 JavaScript或禁用了Javascript!</noscript> </head> <body> <div id="position">點(diǎn)擊按鈕獲取您當(dāng)前坐標(biāo)：</div> <button onclick="getLocation()">點(diǎn)我</button> </body>
在第一次調(diào)用 getCurrentPosition 方法之前，瀏覽器會(huì)詢問(wèn)我們是否允許使用。
只有當(dāng)同意之后，才會(huì)執(zhí)行接下來(lái)的代碼并獲得位置信息。
getCurrentPosition() 方法的返回?cái)?shù)據(jù)
返回的 coords 對(duì)象里，除了前面使用的 latitude 和 longitude，還有以下值：
另外，該方法還返回 timestamp 時(shí)間戳信息，表示響應(yīng)的日期時(shí)間。
Geolocation 對(duì)象的 watchPosition()方法
除了 getCurrentPosition 方法，Geolocation 還有 watchPosition() 方法。
從名稱(chēng)上也能窺見(jiàn)一斑，它返回用戶的當(dāng)前位置，并持續(xù)返回用戶移動(dòng)時(shí)的更新位置。
是不是有點(diǎn)像導(dǎo)航?
相應(yīng)的方法 clearWatch()則是停止 watchPosition()方法。
使用地圖服務(wù)獲得地理位置信息
除了使用 HTML5 提供的 getCurrentPosition 方法獲取地理位置信息之外，還可以使用各大地圖服務(wù)提供商的 API 去獲取地址位置信息，比如說(shuō)使用百度地圖。
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xxxxxxxxxxxxx" ></script> <script type="text/javascript"> var x = document.getElementById("position"); function getLocation() { var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function (e) { if (this.getStatus() == BMAP_STATUS_SUCCESS) { x.innerText = `緯度：${e.point.lat} 經(jīng)度：${e.point.lng}`; } else { x.innerHTML = `failed ${this.getStatus()}`; } }); } </script>
可以看到，這里通過(guò) new BMap.Geolocation() 創(chuàng)建出了一個(gè)實(shí)例，代替上述的 navigator.geolocation。
而后面也略微有差別，它返回的對(duì)象是 point.lat 和 point.lng， 而不是 coords.latitude 和 coords.longitude。
但結(jié)果都是取到了經(jīng)緯度信息。
地圖服務(wù)提供的服務(wù)遠(yuǎn)不止這些，具體的需要查閱地圖的 API 文檔。
拖放(Drag/Drop)
拖放是 HTML5 的標(biāo)準(zhǔn)組，它包含了兩個(gè)動(dòng)，拖動(dòng)和放開(kāi)。
<head> <style type="text/css"> .container { width: 350px; height: 150px; padding: 10px; border: 1px solid #aaaaaa; } </style> <script type="text/javascript"> function dragOver(e) { e.preventDefault(); } function dragStart(e) { e.dataTransfer.setData("Text", e.target.id); } function drop(e) { e.preventDefault(); var data = e.dataTransfer.getData("Text"); e.target.appendChild(document.getElementById(data)); } </script> </head> <body> <p>拖動(dòng)圖片到矩形框中:</p> <div id="targetDiv" class="container" ondrop="drop(event)" ondragover="dragOver(event)" ></div> <br /> <img id="imgDrag" src="../img/html-0.jpg" draggable="true" ondragstart="dragStart(event)" width="300" height="110" /> </body>
拖放都是標(biāo)簽的事件，在被拖放對(duì)象上，首先把屬性 draggable 設(shè)置成 true。
然后實(shí)現(xiàn)它的 ondragstart()方法，在這個(gè)方法里，把通過(guò)傳入的事件句柄對(duì)象(e)，進(jìn)行拖放對(duì)象的傳輸，也就是要 setData()。
同時(shí)在拖放的目標(biāo)位置，實(shí)現(xiàn)方法 ondrop()和 ondragover()。
其中 drop 方法里，通過(guò) getData()方法獲取拖放對(duì)象，然后通過(guò) appendChild()方法把它追加到目標(biāo)位置里。
ondragover()方法決定被拖放的內(nèi)容放置到何處，默認(rèn)是無(wú)法將一個(gè)元素內(nèi)容的東西放到另一個(gè)元素里，如果要允許，除了對(duì)被播放對(duì)象設(shè)置 draggable 為 true，還得要阻止目標(biāo)元素的默認(rèn)出處理方式。這里只使用事件的 preventDefault()方法阻止。
存儲(chǔ)
以往前端本地存儲(chǔ)使用 cookie，但是在 HTML5 里，有比 cookie 更好的本地存儲(chǔ)方式。
本地存儲(chǔ)的意思，是存儲(chǔ)在用戶的電腦端，這樣有些數(shù)據(jù)從服務(wù)器端獲取之后緩存到本地，可以大大提高網(wǎng)站的性能。
本地存儲(chǔ)以鍵值對(duì)形式存在，而且某個(gè)網(wǎng)頁(yè)存儲(chǔ)的內(nèi)容只能該網(wǎng)頁(yè)訪問(wèn)。
客戶端存儲(chǔ)數(shù)據(jù)的對(duì)象有兩個(gè)：localStorage 和 sessionStorage。
localStorage
用于長(zhǎng)久保存整個(gè)網(wǎng)站的數(shù)據(jù)，數(shù)據(jù)沒(méi)有過(guò)期時(shí)間，直到手動(dòng)刪除。
<head> <script> function readlocalStorage() { var messageDiv = document.getElementById("messageDiv"); if (typeof Storage !== "undefined") { localStorage.setItem("message", "這是一條存儲(chǔ)在localStorage里的消息。"); messageDiv.innerHTML = localStorage.getItem("message"); } else { messageDiv.innerHTML = "對(duì)不起，您的瀏覽器不支持 web 存儲(chǔ)。"; } } </script> </head> <body> <button id="getLocalStorage" onclick="readlocalStorage()" value=""> 點(diǎn)我讀取本地存儲(chǔ) </button> <div id="messageDiv"></div> </body>
localStorage 常用的方法有如下，相應(yīng)的 sessionStorage 也一樣。
保存數(shù)據(jù)：localStorage.setItem(key,value)
讀取數(shù)據(jù)：localStorage.getItem(key)
刪除單個(gè)數(shù)據(jù)：localStorage.removeItem(key)
刪除所有數(shù)據(jù)：localStorage.clear()
得到某個(gè)索引的 key：localStorage.key(index)
sessionStorage
用于臨時(shí)保存同一窗口的數(shù)據(jù)，在關(guān)閉窗口之后會(huì)被刪除。
sesessionStorage 和 localStorage 一樣有相應(yīng)的處理數(shù)據(jù)方法，上述示例改成 sessionStorage 如下：
<head> <script> function readsessionStorage() { var messageDiv = document.getElementById("messageSessionDiv"); if (typeof Storage !== "undefined") { sessionStorage.setItem( "message", "這是一條存儲(chǔ)在sessionStorage里的消息。" ); messageDiv.innerHTML = sessionStorage.getItem("message"); } else { messageDiv.innerHTML = "對(duì)不起，您的瀏覽器不支持 web 存儲(chǔ)。"; } } </script> </head> <body> <button id="getSessionStorage" onclick="readsessionStorage()" value=""> 點(diǎn)我讀取本地session存儲(chǔ) </button> <div id="messageSessionDiv"></div> </body>
效果同上。
總結(jié)
?? 使用地理位置 API 能獲取當(dāng)前位置信息，但這個(gè)獲取需要得到用戶的允許。
?? 拖放是基于標(biāo)簽的事件實(shí)現(xiàn)的，需要在被拖放元素和目標(biāo)元素實(shí)現(xiàn)相應(yīng)的事件代碼。
?? 本地存儲(chǔ)比 cookie 更好的在本地保存數(shù)據(jù)，以提高網(wǎng)站的性能。
該文章在 2024/10/22 12:21:50 編輯過(guò)
400 186 1886
