一、HTML5 Geolocation簡介
HTML5 Geolocation（地理定位）API用于獲取用戶的地理位置信息。通過這個API，可以獲取用戶的緯度、經度、海拔等信息。由于地理定位可能涉及用戶隱私，因此只有在用戶同意的情況下，才能獲取其位置信息。
Geolocation API支持以下瀏覽器：
-
Internet Explorer 9+
-
Firefox
-
Chrome
-
Safari
-
Opera
對于擁有GPS的設備（如iPhone），地理定位更加精確。
二、獲取用戶位置
1. 使用getCurrentPosition()方法
getCurrentPosition()方法用于獲取用戶的當前位置。如果成功，該方法會調用一個回調函數，并將位置信息作為參數傳遞給該函數。如果失敗，則會調用另一個回調函數（可選）來處理錯誤。
示例代碼：
HTML復制
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>HTML5 Geolocation 示例</title>
</head>
<body><p id="demo">點擊按鈕獲取您的位置：</p><button onclick="getLocation()">獲取位置</button><script>function getLocation() {if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(showPosition, showError);} else {document.getElementById("demo").innerHTML = "該瀏覽器不支持獲取地理位置。";}}function showPosition(position) {document.getElementById("demo").innerHTML ="緯度: " + position.coords.latitude +"<br>經度: " + position.coords.longitude;}function showError(error) {switch (error.code) {case error.PERMISSION_DENIED:document.getElementById("demo").innerHTML = "用戶拒絕對獲取地理位置的請求。";break;case error.POSITION_UNAVAILABLE:document.getElementById("demo").innerHTML = "位置信息是不可用的。";break;case error.TIMEOUT:document.getElementById("demo").innerHTML = "請求用戶地理位置超時。";break;case error.UNKNOWN_ERROR:document.getElementById("demo").innerHTML = "未知錯誤。";break;}}</script>
</body>
</html>預覽
示例說明：
-
navigator.geolocation：檢查瀏覽器是否支持地理定位。 -
getCurrentPosition()：獲取用戶當前位置。第一個參數是成功回調函數，第二個參數是錯誤處理函數（可選）。 -
showPosition()：成功獲取位置后，顯示緯度和經度。 -
showError()：處理獲取位置時可能出現的錯誤。
三、在地圖中顯示位置
獲取到用戶的位置信息后，可以使用地圖服務（如Google Maps或百度地圖）將位置顯示在地圖上。
示例代碼：
HTML復制
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>HTML5 Geolocation 地圖顯示</title>
</head>
<body><p id="demo">點擊按鈕獲取您的位置并顯示在地圖上：</p><button onclick="getLocation()">獲取位置</button><div id="mapholder"></div><script>function getLocation() {if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(showPosition, showError);} else {document.getElementById("demo").innerHTML = "該瀏覽器不支持獲取地理位置。";}}function showPosition(position) {var latlon = position.coords.latitude + "," + position.coords.longitude;var img_url = "http://maps.googleapis.com/maps/api/staticmap?center="+ latlon + "&zoom=14&size=400x300&sensor=false";document.getElementById("mapholder").innerHTML = "<img src='" + img_url + "'>";}function showError(error) {switch (error.code) {case error.PERMISSION_DENIED:document.getElementById("demo").innerHTML = "用戶拒絕對獲取地理位置的請求。";break;case error.POSITION_UNAVAILABLE:document.getElementById("demo").innerHTML = "位置信息是不可用的。";break;case error.TIMEOUT:document.getElementById("demo").innerHTML = "請求用戶地理位置超時。";break;case error.UNKNOWN_ERROR:document.getElementById("demo").innerHTML = "未知錯誤。";break;}}</script>
</body>
</html>預覽
示例說明：
-
showPosition()：獲取到位置信息后，使用Google Maps的靜態地圖API生成地圖圖片，并顯示在頁面上。 -
img_url：通過拼接緯度和經度，生成Google Maps的靜態地圖URL。
四、實時跟蹤用戶位置
watchPosition()方法用于實時跟蹤用戶的當前位置，并在用戶移動時更新位置信息。與getCurrentPosition()方法類似，watchPosition()也接受兩個回調函數：一個用于成功，一個用于錯誤處理。
示例代碼：
HTML復制
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>HTML5 Geolocation 實時跟蹤</title>
</head>
<body><p id="demo">實時跟蹤您的位置：</p><button onclick="getLocation()">開始跟蹤</button><script>function getLocation() {if (navigator.geolocation) {navigator.geolocation.watchPosition(showPosition, showError);} else {document.getElementById("demo").innerHTML = "該瀏覽器不支持獲取地理位置。";}}function showPosition(position) {document.getElementById("demo").innerHTML ="緯度: " + position.coords.latitude +"<br>經度: " + position.coords.longitude;}function showError(error) {switch (error.code) {case error.PERMISSION_DENIED:document.getElementById("demo").innerHTML = "用戶拒絕對獲取地理位置的請求。";break;case error.POSITION_UNAVAILABLE:document.getElementById("demo").innerHTML = "位置信息是不可用的。";break;case error.TIMEOUT:document.getElementById("demo").innerHTML = "請求用戶地理位置超時。";break;case error.UNKNOWN_ERROR:document.getElementById("demo").innerHTML = "未知錯誤。";break;}}</script>
</body>
</html>預覽
示例說明：
-
watchPosition()：實時跟蹤用戶位置，并在用戶移動時更新位置信息。 -
showPosition()：顯示實時更新的緯度和經度。
 leetcode刷題)
 Practice 1028 List Sorting)
