HTML Geolocation API ใช้เพื่อรับตำแหน่งทางภูมิศาสตร์ของผู้ใช้
เนื่องจากสิ่งนี้สามารถกระทบต่อความเป็นส่วนตัว ตำแหน่งจึงไม่ว่างเว้นแต่ผู้ใช้จะอนุมัติ
<script> let x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition,showError); } else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { let lat=position.coords.latitude; let lon=position.coords.longitude; let latlon=new google.maps.LatLng(lat, lon) let mapholder=document.getElementById('mapholder') mapholder.style.height='250px'; mapholder.style.width='100%'; let myOptions={ center:latlon,zoom:14, mapTypeId:google.maps.MapTypeId.ROADMAP, mapTypeControl:false, navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL} }; let map=new google.maps.Map(document.getElementById("mapholder"),myOptions); let marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"}); } function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML="User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: x.innerHTML="Location information is unavailable." break; case error.TIMEOUT: x.innerHTML="The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML="An unknown error occurred." break; } }ตำแหน่งทางภูมิศาสตร์แม่นยำที่สุดสำหรับอุปกรณ์ที่มี GPS เช่น สมาร์ทโฟน
Geolocation API รองรับเบราว์เซอร์ทั้งหมด:
| Yes | Yes | Yes | Yes | Yes |
Geolocation API จะทำงานเฉพาะในบริบทที่ปลอดภัยเท่านั้น เป็น HTTPS
หากไซต์ของคุณโฮสต์บนต้นทางที่ไม่ปลอดภัย (เช่น HTTP) คำขอรับตำแหน่งของผู้ใช้จะไม่ทำงานอีกต่อไป
getCurrentPosition() วิธีการที่ใช้ในการส่งคืนตำแหน่งของผู้ใช้
ตัวอย่างด้านล่างส่งคืนละติจูดและลองจิจูดของตำแหน่งของผู้ใช้:
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Geolocation API</h2>
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>
ตัวอย่างอธิบาย:
ตรวจสอบว่ารองรับตำแหน่งทางภูมิศาสตร์หรือไม่
หากรองรับ ให้รันเมธอด getCurrentPosition() ถ้าไม่เช่นนั้น ให้แสดงข้อความถึงผู้ใช้
หากเมธอด getCurrentPosition() สำเร็จ จะส่งคืนออบเจ็กต์พิกัดไปยังฟังก์ชันที่ระบุในพารามิเตอร์ (showPosition)
ฟังก์ชัน showPosition() จะแสดงค่าละติจูดและลองจิจูด
ตัวอย่างข้างต้นเป็นสคริปต์ Geolocation ขั้นพื้นฐาน โดยไม่มีการจัดการข้อผิดพลาด
พารามิเตอร์ตัวที่สองของเมธอด getCurrentPosition() ใช้เพื่อจัดการ ข้อผิดพลาด ระบุฟังก์ชันที่จะเรียกใช้หากล้มเหลวในการรับตำแหน่งของผู้ใช้:
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Geolocation API</h2>
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
</script>
</body>
</html>
หากต้องการแสดงผลลัพธ์ในแผนที่ คุณต้องเข้าถึงบริการแผนที่ เช่น Google แผนที่
ในตัวอย่างด้านล่าง ละติจูดและลองจิจูดที่ส่งคืนจะใช้เพื่อแสดงตำแหน่งใน Google แผนที่ (ใช้ภาพนิ่ง):
function showPosition(position) {
let latlon = position.coords.latitude + "," + position.coords.longitude;
let img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
"+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";
document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}ลองด้วยตัวเอง
<!DOCTYPE html>
<html>
<body>
<h1>HTML Geolocation</h1>
<p id="demo">Click the button to get your position.</p>
<button onclick="getLocation()">Try It</button>
<div id="mapholder"></div>
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
let latlon = position.coords.latitude + "," + position.coords.longitude;
let img_url = "https://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU";
document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}
//To use this code on your website, get a free API key from Google.
//Read more at: https://www.w3schools.com/graphics/google_maps_basic.asp
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
</script>
</body>
</html>
วิธีแสดง Google Map แบบโต้ตอบพร้อมตัวเลือกมาร์กเกอร์ ซูม และลาก
สคริปต์แผนที่ของ Google
<!DOCTYPE html>
<html>
<body>
<h1>HTML Geolocation</h1>
<p id="demo">Click the button to get your position.</p>
<button onclick="getLocation()">Try It</button>
<div id="mapholder"></div>
<script src="https://maps.google.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU"></script>
<!--
To use this code on your website, get a free API key from Google.
Read more at: https://www.w3schools.com/graphics/google_maps_basic.asp
-->
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
let lat = position.coords.latitude;
let lon = position.coords.longitude;
const latlon = new google.maps.LatLng(lat, lon)
const mapholder = document.getElementById('mapholder')
mapholder.style.height = '250px';
mapholder.style.width = '500px';
var myOptions = {
center:latlon,zoom:14,
mapTypeId:google.maps.MapTypeId.ROADMAP,
mapTypeControl:false,
navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
}
const map = new google.maps.Map(document.getElementById("mapholder"), myOptions);
const marker = new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
</script>
</body>
</html>
หน้านี้ได้สาธิตวิธีการแสดงตำแหน่งของผู้ใช้บนแผนที่
ตำแหน่งทางภูมิศาสตร์ยังมีประโยชน์มากสำหรับข้อมูลเฉพาะตำแหน่ง เช่น:
ข้อมูลท้องถิ่นที่ทันสมัย
แสดงจุดที่น่าสนใจใกล้กับผู้ใช้
ระบบนำทางแบบเลี้ยวต่อเลี้ยว (GPS)
getCurrentPosition() วิธีการส่งกลับวัตถุที่ประสบความสำเร็จ ละติจูด คุณสมบัติลองจิจูดและความแม่นยำจะถูกส่งกลับเสมอ คุณสมบัติอื่นๆ จะถูกส่งกลับ ถ้ามี:
ละติจูดเป็นเลขทศนิยม (ส่งคืนเสมอ)
ลองจิจูดเป็นเลขทศนิยม (ส่งคืนเสมอ)
ความถูกต้องของตำแหน่ง (ส่งคืนเสมอ)
ระดับความสูงเป็นเมตรเหนือระดับน้ำทะเลปานกลาง (ส่งคืนหากมี)
ความแม่นยำของระดับความสูงของตำแหน่ง (ส่งคืนหากมี)
ทิศเหนือเป็นองศาตามเข็มนาฬิกา (ส่งคืนถ้ามี)
ความเร็วเป็นเมตรต่อวินาที (ส่งคืนหากมี)
วันที่/เวลาในการตอบกลับ (ส่งคืนหากมี)
วัตถุ Geolocation ยังมีวิธีการอื่นๆ ที่น่าสนใจ:
watchPosition() - ส่งคืนตำแหน่งปัจจุบันของผู้ใช้และดำเนินการต่อ คืนตำแหน่งที่อัปเดตเมื่อผู้ใช้เคลื่อนที่ (เช่น GPS ในรถยนต์)
clearWatch() - หยุดเมธอด watchPosition()
ตัวอย่างด้านล่างแสดงวิธี watchPosition() คุณต้องมีอุปกรณ์ GPS ที่แม่นยำเพื่อทดสอบสิ่งนี้ (เช่น สมาร์ทโฟน):
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Geolocation API</h2>
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
const x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>