現在的網頁已經不僅僅是純文字和圖片的展示，越來越多的網頁需要使用到地圖和地理位置，比如地圖應用、周邊搜索等。而地圖應用和周邊搜索的基礎都是地理位置坐標，這就需要我們學習如何在網頁中使用地理位置坐標(經度和緯度)。下面我們就從多個方面詳細闡述。
一、瀏覽器獲取地理位置坐標
在我們使用網頁中的地理位置坐標前，首先我們需要了解如何獲取地理位置坐標。
瀏覽器提供了一個 `navigator.geolocation`屬性，它包含了獲取地理位置相關的方法。其中，其中比較常用的是 `getCurrentPosition()` 方法，它可以直接獲取當前用戶的地理位置坐標。注意：在使用該方法時，需要用戶授權。
navigator.geolocation.getCurrentPosition((position) => {
const latitude = position.coords.latitude; // 獲取緯度
const longitude = position.coords.longitude; // 獲取經度
// 將緯度和經度展示到頁面
document.getElementById('latitude').innerHTML = latitude;
document.getElementById('longitude').innerHTML = longitude;
});
上面的示例代碼可以獲取用戶的地理位置坐標，並將緯度和經度分別展示到頁面上。同樣的，我們也可以使用 `watchPosition()` 方法來獲取用戶的持續變化的地理位置坐標，而不是只獲取一次。
二、使用地圖API展示坐標
獲取到地理位置坐標後，我們可以使用地圖API將它展示出來。目前比較常用的地圖服務商有百度地圖、高德地圖、谷歌地圖等。
下面以百度地圖API為例，展示如何在網頁中使用地理位置坐標展示地圖：
原創文章，作者：CNKZ，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/148294.html
微信掃一掃 
支付寶掃一掃 