HTML5 Guide-4 ใช้ตำแหน่งทางภูมิศาสตร์เพื่อใช้ฟังก์ชั่นการวางตำแหน่ง

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-04-02 19:00:04

สิ่งที่เราต้องการเรียนรู้ในวันนี้คือการใช้ตำแหน่งทางภูมิศาสตร์เพื่อใช้ฟังก์ชั่นการวางตำแหน่ง เราสามารถรับวัตถุตำแหน่งทางภูมิศาสตร์ผ่านการนำทาง geolocation ซึ่งให้วิธีการต่อไปนี้:

getCurrentPosition (การโทรกลับ, ข้อผิดพลาด, ตัวเลือก): รับตำแหน่งปัจจุบัน;

WatchPosition (การโทรกลับ, ข้อผิดพลาด, ตัวเลือก): เริ่มตรวจสอบตำแหน่งปัจจุบัน;

ClearWatch (ID): หยุดการตรวจสอบตำแหน่งปัจจุบัน

หมายเหตุ: เบราว์เซอร์ที่ใช้ในตัวอย่างต่อไปนี้คือ Chrome การใช้เบราว์เซอร์อื่น ๆ ฉันไม่สามารถรับประกันได้ว่าผลลัพธ์ที่รันนั้นสอดคล้องกับผลลัพธ์ที่แสดงโดยตัวอย่าง

1. รับตำแหน่งปัจจุบัน

เราจะใช้วิธี getCurrentPosition เพื่อรับตำแหน่งปัจจุบัน ข้อมูลตำแหน่งจะไม่ถูกส่งคืนโดยตรงในรูปแบบของผลลัพธ์ เราจำเป็นต้องใช้ฟังก์ชั่นการโทรกลับเพื่อประมวลผล จะมีความล่าช้าในการรับพิกัดและคุณจะขอสิทธิ์การเข้าถึง ดูตัวอย่างต่อไปนี้:

<! doctype html>

<html>

<head>

<title> ตัวอย่าง </title>

<style>

ตาราง {การล่มสลายของชายแดน: ยุบ;}

th, td {padding: 4px;}

th {text-allign: ขวา;}

</style>

</head>

<body>

<table>

<tr>

<th> ลองจิจูด: </th>

<th> ละติจูด: </th>

</tr>

<tr>

<th> ระดับความสูง: </th>

<th> ความแม่นยำ: </th>

</tr>

<tr>

<th> ความแม่นยำระดับความสูง: </th>

<th> หัวเรื่อง: </th>

</tr>

<tr>

<th> ความเร็ว: </th>

<th> การประทับเวลา: </th>

</tr>

</table>

Navigator.geolocation.getCurrentPosition (DisplayPosition);

ฟังก์ชัน DisplayPosition (POS) {

คุณสมบัติ var = ['ลองจิจูด', 'ละติจูด', 'ระดับความสูง', 'ระดับความสูง', 'ความแม่นยำ', 'Altitudeaccuracy', 'หัวเรื่อง', 'ความเร็ว'];

สำหรับ (var i = 0, len = properties.length; i <len; i ++) {

var value = pos.coords [คุณสมบัติ [i]];

document.getElementById (คุณสมบัติ [i]). innerhtml = ค่า;

document.getElementById ('timestamp'). innerhtml = pos.timestamp;

</script>

</body>

</html>

วัตถุตำแหน่งที่ส่งคืนมีคุณสมบัติสองคุณสมบัติ Coords: ข้อมูลพิกัดส่งคืน; การประทับเวลา: เวลาในการรับข้อมูลพิกัด ในหมู่พวกเขา Coords รวมถึงคุณสมบัติต่อไปนี้: Latitude: Latitude; ลองจิจูด: ลองจิจูด; ระดับความสูง: ความสูง; ความแม่นยำ: ความแม่นยำ (เมตร); Altitudeaccuracy: ความแม่นยำสูง (เมตร); หัวข้อ: ทิศทางการเดินทาง; ความเร็ว: ความเร็วในการเดินทาง (เมตร/วินาที)

ข้อมูลทั้งหมดจะไม่ถูกส่งคืนขึ้นอยู่กับอุปกรณ์ที่คุณโฮสต์เบราว์เซอร์ อุปกรณ์มือถือเช่น GPS, ตัวเร่งความเร็วและเข็มทิศจะส่งคืนข้อมูลส่วนใหญ่ แต่คอมพิวเตอร์ที่บ้านจะไม่ทำงาน ข้อมูลตำแหน่งที่ได้รับจากคอมพิวเตอร์ที่บ้านขึ้นอยู่กับสภาพแวดล้อมเครือข่ายหรือ WiFi ลองดูผลลัพธ์ที่กำลังดำเนินอยู่ของตัวอย่างข้างต้น

คลิกอนุญาตให้รับข้อมูลพิกัด

2. จัดการข้อยกเว้น

ตอนนี้เราแนะนำการจัดการข้อยกเว้นของ getCurrentPosition ซึ่งดำเนินการโดยใช้ฟังก์ชันการเรียกกลับข้อผิดพลาด ข้อผิดพลาดของพารามิเตอร์ที่ส่งคืนโดยฟังก์ชั่นมีคุณสมบัติสองคุณสมบัติรหัส: รหัสของประเภทข้อผิดพลาด; ข้อความ: ข้อความแสดงข้อผิดพลาด รหัสมีสามค่า: 1: ผู้ใช้ไม่ได้รับอนุญาตให้ใช้ตำแหน่งทางภูมิศาสตร์ 2: ไม่สามารถรับข้อมูลพิกัดได้ 3: การหมดเวลาข้อมูลจะได้รับ

มาดูตัวอย่างด้านล่าง:

<! doctype html>

<html>

<head>

<title> ตัวอย่าง </title>

<style>

ตาราง {การล่มสลายของชายแดน: ยุบ;}

th, td {padding: 4px;}

th {text-allign: ขวา;}

</style>

</head>

<body>

<table>

<tr>

<th> ลองจิจูด: </th>

<th> ละติจูด: </th>

</tr>

<tr>

<th> ระดับความสูง: </th>

<th> ความแม่นยำ: </th>

</tr>

<tr>

<th> ความแม่นยำระดับความสูง: </th>

<th> หัวเรื่อง: </th>

</tr>

<tr>

<th> ความเร็ว: </th>

<th> การประทับเวลา: </th>

</tr>

<tr>

<th> รหัสข้อผิดพลาด: </th>

<th> ข้อความแสดงข้อผิดพลาด: </th>

</tr>

</table>

Navigator.geolocation.getCurrentPosition (DisplayPosition, HandleRror);

ฟังก์ชัน DisplayPosition (POS) {

คุณสมบัติ var = ["ลองจิจูด", "ละติจูด", "ระดับความสูง", "ความแม่นยำ", "altitudeaccuracy", "หัวเรื่อง", "ความเร็ว"];

สำหรับ (var i = 0; i <properties.length; i ++) {

var value = pos.coords [คุณสมบัติ [i]];

document.getElementById (คุณสมบัติ [i]). innerhtml = ค่า;

document.getElementById ("timestamp"). innerhtml = pos.timestamp;

ฟังก์ชั่น HandleRror (ERR) {

document.getElementById ("errCode"). innerhtml = err.code;

document.getElementById ("errMessage"). innerhtml = err.message;

</script>

</body>

</html>

การอนุญาตถูกปฏิเสธผลการดำเนินงาน:

3. ใช้รายการพารามิเตอร์ทางเลือก geolocation

ตัวเลือกใน getCurrentPosition (การโทรกลับ, ข้อผิดพลาดการกลับ, ตัวเลือก) มีพารามิเตอร์ต่อไปนี้ที่จะใช้, enablehighcuracy: ใช้เอฟเฟกต์ที่ดีที่สุด; หมดเวลา: หมดเวลา (มิลลิวินาที); สูงสุด: ระบุเวลาแคช (มิลลิวินาที) ลองดูตัวอย่างต่อไปนี้:

<! doctype html>

<html>

<head>

<title> ตัวอย่าง </title>

<style>

ตาราง {การล่มสลายของชายแดน: ยุบ;}

th, td {padding: 4px;}

th {text-allign: ขวา;}

</style>

</head>

<body>

<table>

<tr>

<th> ลองจิจูด: </th>

<th> ละติจูด: </th>

</tr>

<tr>

<th> ระดับความสูง: </th>

<th> ความแม่นยำ: </th>

</tr>

<tr>

<th> ความแม่นยำระดับความสูง: </th>

<th> หัวเรื่อง: </th>

</tr>

<tr>

<th> ความเร็ว: </th>

<th> การประทับเวลา: </th>

</tr>

<tr>

<th> รหัสข้อผิดพลาด: </th>

<th> ข้อความแสดงข้อผิดพลาด: </th>

</tr>

</table>

ตัวเลือก var = {

enablehighcuracy: false,

หมดเวลา: 2000,

สูงสุด: 30000

Navigator.geolocation.getCurrentPosition (DisplayPosition, HandleRror, ตัวเลือก);

ฟังก์ชัน DisplayPosition (POS) {

สำหรับ (var i = 0; i <properties.length; i ++) {

var value = pos.coords [คุณสมบัติ [i]];

document.getElementById (คุณสมบัติ [i]). innerhtml = ค่า;

document.getElementById ("timestamp"). innerhtml = pos.timestamp;

ฟังก์ชั่น HandleRror (ERR) {

document.getElementById ("errCode"). innerhtml = err.code;

document.getElementById ("errMessage"). innerhtml = err.message;

</script>

</body>

</html>

4. ตรวจสอบการเปลี่ยนแปลงตำแหน่ง

ด้านล่างเราแนะนำการใช้วิธี WatchPosition เพื่อใช้การเปลี่ยนแปลงตำแหน่ง วิธีการใช้งานของมันเหมือนกับ getCurrentPosition มาดูตัวอย่าง:

<! doctype html>

<html>

<head>

<title> ตัวอย่าง </title>

<style>

ตาราง {การล่มสลายของชายแดน: ยุบ;}

th, td {padding: 4px;}

th {text-allign: ขวา;}

</style>

</head>

<body>

<table>

<tr>

<th> ลองจิจูด: </th>

<th> ละติจูด: </th>

</tr>

<tr>

<th> ระดับความสูง: </th>

<th> ความแม่นยำ: </th>

</tr>

<tr>

<th> ความแม่นยำระดับความสูง: </th>

<th> หัวเรื่อง: </th>

</tr>

<tr>

<th> ความเร็ว: </th>

<th> การประทับเวลา: </th>

</tr>

<tr>

<th> รหัสข้อผิดพลาด: </th>

<th> ข้อความแสดงข้อผิดพลาด: </th>

</tr>

</table>

<button id = "pressme"> ยกเลิก watch </ button>

ตัวเลือก var = {

enablehighcuracy: false,

หมดเวลา: 2000,

สูงสุด: 30000

var watchId = navigator.geolocation.watchposition (DisplayPosition, HandleRror, ตัวเลือก);

document.getElementById ("pressme"). onclick = function (e) {

Navigator.geolocation.ClearWatch (watchId);

ฟังก์ชัน DisplayPosition (POS) {

สำหรับ (var i = 0; i <properties.length; i ++) {

var value = pos.coords [คุณสมบัติ [i]];

document.getElementById (คุณสมบัติ [i]). innerhtml = ค่า;

document.getElementById ("timestamp"). innerhtml = pos.timestamp;

ฟังก์ชั่น HandleRror (ERR) {

document.getElementById ("errCode"). innerhtml = err.code;

document.getElementById ("errMessage"). innerhtml = err.message;

</script>

</body>

</html>

เมื่อคลิกปุ่มยกเลิกการเฝ้าดูการตรวจสอบจะหยุด

ที่อยู่ดาวน์โหลดตัวอย่าง: html5guide.geolocation.zip