114 lines
4.0 KiB
HTML
114 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Get GPS Location and Map Example</title>
|
|
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
|
|
<style>
|
|
#map {
|
|
height: 800px;
|
|
width: 50%;
|
|
margin-top: 20px; /* 調整上邊距為 20px */
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Get GPS Location and Map Example</h1>
|
|
<p>Click the button below to get your GPS location:</p>
|
|
<button onclick="getLocation()">Get Location</button>
|
|
<p id="location"></p>
|
|
<button onclick="copyText()">複製經緯度</button>
|
|
<textarea id="latlong" style="opacity: 0; position: absolute"></textarea>
|
|
<div id="map"></div>
|
|
|
|
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
|
|
<script>
|
|
var map;
|
|
|
|
function initMap() {
|
|
// 在地圖容器上初始化一個 Leaflet 地圖
|
|
map = L.map("map");
|
|
|
|
// 添加一個 OpenStreetMap 圖層
|
|
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
|
|
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
|
|
maxZoom: 18,
|
|
}).addTo(map);
|
|
|
|
// 設定地圖視圖為台灣的中心點
|
|
var taiwanCenter = [23.6978, 120.9605];
|
|
map.setView(taiwanCenter, 8);
|
|
}
|
|
|
|
function addMarker(latitude, longitude, popupContent) {
|
|
// 在地圖上添加一個標記
|
|
var marker = L.marker([latitude, longitude]).addTo(map).bindPopup(popupContent).openPopup();
|
|
|
|
// 將地圖視圖設定為標記的位置
|
|
map.setView([latitude, longitude], 17);
|
|
}
|
|
|
|
function copyText() {
|
|
var text = document.getElementById("latlong");
|
|
text.select();
|
|
document.execCommand("copy");
|
|
alert("經緯度已複製到剪貼簿");
|
|
}
|
|
|
|
function reverseGeocode(latitude, longitude) {
|
|
var apiUrl = "https://nominatim.openstreetmap.org/reverse?format=json&lat=" + latitude + "&lon=" + longitude;
|
|
|
|
return fetch(apiUrl)
|
|
.then(function (response) {
|
|
return response.json();
|
|
})
|
|
.then(function (data) {
|
|
if (data.address) {
|
|
var address = data.display_name;
|
|
console.log("Address: " + address);
|
|
document.getElementById("location").textContent = address; // 將地址顯示在網頁上
|
|
return address; // 將地址返回
|
|
} else {
|
|
console.log("No results found");
|
|
return null; // 若無結果則返回 null
|
|
}
|
|
})
|
|
.catch(function (error) {
|
|
console.log("Error: " + error);
|
|
return null; // 若出現錯誤則返回 null
|
|
});
|
|
}
|
|
|
|
function getLocation() {
|
|
if (navigator.geolocation) {
|
|
navigator.geolocation.getCurrentPosition(
|
|
function (position) {
|
|
var latitude = position.coords.latitude;
|
|
var longitude = position.coords.longitude;
|
|
var locationText = latitude + ", " + longitude;
|
|
document.getElementById("location").textContent = locationText;
|
|
document.getElementById("latlong").textContent = locationText;
|
|
|
|
reverseGeocode(latitude, longitude)
|
|
.then(function (address) {
|
|
// addMarker(latitude, longitude, address); // 將地址傳遞給 addMarker()
|
|
console.log(latitude, longitude, address);
|
|
})
|
|
.catch(function (error) {
|
|
console.log("Reverse geocoding error: " + error);
|
|
});
|
|
},
|
|
function (error) {
|
|
var message = "Error code: " + error.code + ", Error message: " + error.message;
|
|
document.getElementById("location").textContent = message;
|
|
}
|
|
);
|
|
} else {
|
|
document.getElementById("location").textContent = "Geolocation is not supported by this browser.";
|
|
}
|
|
}
|
|
// 初始化地圖
|
|
initMap();
|
|
</script>
|
|
</body>
|
|
</html>
|