資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在HTML中定位使用者位置？
有時，任務是找到使用者的當前位置，然後在網頁上顯示位置座標或在地圖上顯示位置。本文使用HTML和Javascript程式碼演示了在HTML頁面中獲取使用者當前位置的過程。這透過兩個不同的示例來說明。在第一個示例中，可以獲取使用者的當前位置，然後在HTML頁面上顯示位置座標。在第二個示例中，使用開源Leaflet地相簿來獲取並在地圖上顯示使用者的當前位置。
示例1：查詢使用者的當前位置並在html頁面上顯示位置座標。
程式碼解釋和設計步驟 −
步驟1 − 建立一個HTML檔案並開始編寫程式碼。
步驟2 − 建立一個<p>標籤
並將其設定為顯示位置座標。
步驟3 − 建立一個按鈕，並在點選按鈕時呼叫函式getYourLoc()。
步驟4 − 在<script>標籤內編寫程式碼，並建立兩個函式getYourLoc()和showMyPos(pos)。
步驟5 − 在getYourLoc()中編寫javascript程式碼，使用navigator.geolocation.getCurrentPosition()查詢當前位置，然後呼叫showMyPos(pos)。
步驟6 − 使用showMyPos(pos)將位置新增到
之前建立的<p>標籤中。檢查結果。
使用的重要檔案 − locationfile.html
locationfile.html程式碼
<!DOCTYPE html>
<html>
<body>
<p>Show My Location Coordinates</p>
<button onclick="getYourLoc()">Get the location coordinates</button>
<p id="showloc"></p>
<script>
var x = document.getElementById("showloc");
function getYourLoc() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showMyPos);
} else {
x.innerHTML = "No support for this in the browser.";
}
}
function showMyPos(pos) {
x.innerHTML = "My Latitude is : " + pos.coords.latitude +
"<br>My Longitude is : " + pos.coords.longitude;
}
</script>
</body>
</html>
檢視結果
要檢視結果，請在瀏覽器中開啟locationfile.html。現在點選按鈕查詢使用者的當前位置。座標將顯示在html頁面上。
示例2：查詢使用者的當前位置並在地圖上顯示位置座標。
程式碼解釋和設計步驟 −
步驟1 − 建立一個HTML檔案並開始編寫程式碼。
步驟2 − 建立一個<p>標籤
並將其設定為顯示位置座標。
步驟3 − 建立一個按鈕，並在點選按鈕時呼叫函式getYourLoc()。
步驟4 − 在<script>標籤內編寫程式碼，並建立三個函式getYourLoc()、showMyPos(pos)和showmap(pos)。
步驟5 − 在getYourLoc()中編寫javascript程式碼，使用navigator.geolocation.getCurrentPosition()查詢當前位置，然後呼叫showMyPos(pos)和showmap(pos)兩個函式。
步驟6 − 為了顯示地圖，在showmap(pos)函式中，包含leaflet庫，使用底圖，設定標記，並傳遞當前位置座標來標記地圖位置。
步驟7 − 使用showMyPos(pos)將位置新增到
之前建立的<p>標籤中。同時顯示地圖。檢查結果。
使用的重要檔案 − locationfile11.html
locationfile11.html程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Leaflet Map</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" crossorigin="" />
<style type="text/css">
body{
margin: 0;
padding: 0;
}
#map {
width: 100vw;
height: 100vh;
}
</style>
</head>
<body>
<p>Show My Location Coordinates</p>
<button onclick="getYourLoc()">Get the location coordinates</button>
<p id="showloc"></p>
<div id="map"></div>
// the leaflet library for making maps
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js" crossorigin=""></script>
<script>
var x = document.getElementById("showloc");
// get the current location of the user
function getYourLoc() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showMyPos);
} else {
x.innerHTML = "No support for this in the browser.";
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showmap);
} else {
x.innerHTML = "No map here.";
}
}
function showMyPos(pos) {
var lat=pos.coords.latitude;
var lon=pos.coords.longitude;
x.innerHTML = "My Latitude is : " + lat +
"<br>My Longitude is : " + lon;
}
function showmap(pos){
var latc=pos.coords.latitude;
var lonc=pos.coords.longitude;
const map = L.map('map', {
center: [latc, lonc],
zoom: 3
});
//Adding a base map
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' }).addTo(map);
const marker1 = L.marker([latc, lonc]).addTo(map);
}
</script>
</body>
</html>
檢視結果
要檢視結果，請在瀏覽器中開啟locationfile11.html。現在點選按鈕查詢使用者的當前位置。座標將顯示在地圖上並被標記。
在這篇HTML文章中，透過兩個不同的示例，展示瞭如何查詢使用者當前位置的方法。首先介紹了在獲取位置後在頁面上顯示位置座標的方法，然後介紹了在HTML頁面中顯示位置的同時在地圖上使用這些座標的方法。
瀏覽量：308
