ใช้ HTML Geolocation API จะใช้ในการค้นหาตำแหน่งของผู้ใช้
อะไร W3C Geolocation API?
ของ W3C Geolocation API เป็นความพยายามโดย World Wide Web สมาคม (W3C) เพื่อให้เป็นมาตรฐานอินเตอร์เฟซที่จะดึงข้อมูลที่ตั้งทางภูมิศาสตร์สำหรับอุปกรณ์ฝั่งไคลเอ็นต์
มันกำหนดชุดของวัตถุ ECMAScript สอดคล้องกับมาตรฐานที่ดำเนินการในการประยุกต์ใช้ลูกค้าให้ตำแหน่งของอุปกรณ์ของลูกค้าผ่านการให้คำปรึกษาข้อมูลสถานที่ตั้งเซิร์ฟเวอร์ซึ่งมีความโปร่งใสสำหรับอินเตอร์เฟซการเขียนโปรแกรมแอพลิเคชัน (API)
แหล่งที่พบมากที่สุดของข้อมูลสถานที่มีที่อยู่ IP, Wi-Fi และบลูทู ธ ที่อยู่ MAC, radio-frequency identification (RFID) ที่ตั้งของการเชื่อมต่อ Wi-Fi หรืออุปกรณ์ Global Positioning System (GPS) และ GSM รหัสมือถือ / CDMA
สถานที่จะกลับมาพร้อมกับความถูกต้องได้รับขึ้นอยู่กับสถานที่ตั้งของแหล่งที่ดีที่สุดสำหรับข้อมูลที่มีอยู่
การปรับใช้ในเว็บเบราเซอร์
หน้าเว็บสามารถใช้ Geolocation API โดยตรงหากเว็บเบราเซอร์ใช้มัน อดีตเบราว์เซอร์บางคนอาจได้รับการสนับสนุนผ่านทางปลั๊กอิน Google Gears แต่ถูกยกเลิกในปี 2010 และ API ฝั่งเซิร์ฟเวอร์มันขึ้นอยู่กับการหยุดการตอบสนองในปี 2012
ตำแหน่งทางภูมิศาสตร์ API จะเหมาะกับการใช้งานเว็บสำหรับอุปกรณ์มือถือเช่นผู้ช่วยดิจิตอลส่วนบุคคล (PDA) และมาร์ทโฟน บนคอมพิวเตอร์เดสก์ทอปของ W3C Geolocation API ทำงานใน Firefox ตั้งแต่รุ่น 3.5, Google Chrome, Opera 10.6, Internet Explorer 9.0 และ Safari 5. ในโทรศัพท์มือถือก็ทำงานบน Android (เฟิร์มแว 2.0+), iOS, Windows Phone และ Maemo
ของ W3C Geolocation API นอกจากนี้ยังได้รับการสนับสนุนโดย Opera Mobile 10.1 - สามารถใช้ได้สำหรับ Android และ Symbian อุปกรณ์ (S60 คนรุ่นที่ 3 และ 5) ตั้งแต่ 24 พฤศจิกายน 2010
Google Gears ให้การสนับสนุนทางภูมิศาสตร์สำหรับเบราว์เซอร์รุ่นเก่าและไม่สอดคล้องรวมทั้ง Internet Explorer 7.0 ขึ้นไปเป็นปลั๊กอิน Gears และ Google Chrome ซึ่งดำเนินการ Gears กำเนิด นอกจากนี้ยังได้รับการสนับสนุนทางภูมิศาสตร์บนอุปกรณ์มือถือเป็นปลั๊กอินสำหรับเบราว์เซอร์ Android (รุ่นก่อน 2.0) และ Opera Mobile สำหรับ Windows มือถือ
อย่างไรก็ตาม Google Gears Geolocation API ไม่เข้ากันกับ W3C Geolocation API และได้รับการสนับสนุนอีกต่อไป
คุณสมบัติ
ผลของ W3C Geolocation API มักจะให้ 4 คุณสมบัติที่ตั้งรวมทั้งละติจูดและลองจิจูด (พิกัด), ความสูง (สูง) และ [ความถูกต้องของตำแหน่งที่รวบรวม] ซึ่งทั้งหมดขึ้นอยู่กับแหล่งที่มาของสถานที่
ในการสืบค้นบางระดับความสูงอาจผลผลิตหรือผลตอบแทนไม่คุ้มค่า
ค้นหาตำแหน่งของผู้ใช้
ใช้ HTML Geolocation API จะใช้ในการได้รับตำแหน่งทางภูมิศาสตร์ของผู้ใช้
ตั้งแต่นี้สามารถยอมความเป็นส่วนตัวตำแหน่งไม่สามารถใช้ได้เว้นแต่ผู้ใช้อนุมัติ
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ Geolocation
| API | |||||
|---|---|---|---|---|---|
| Geolocation | 5.0 | 9.0 | 3.5 | 5.0 | 16.0 |
Note: Geolocation คือความแม่นยำมากขึ้นสำหรับอุปกรณ์ที่มีจีพีเอสเช่น iPhone
ใช้ Geolocation HTML
getCurrentPosition() วิธีการที่ใช้ในการรับตำแหน่งของผู้ใช้
ตัวอย่างด้านล่างกลับละติจูดและลองจิจูดของตำแหน่งของผู้ใช้:
ตัวอย่าง
<script>
var 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> ลองตัวเอง» ตัวอย่างอธิบาย:
- ตรวจสอบว่าได้รับการสนับสนุน Geolocation
- หากได้รับการสนับสนุนให้ดำเนินการ 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;
}
} ลองตัวเอง» แสดงผลในแผนที่
ในการแสดงผลในแผนที่คุณจำเป็นต้องเข้าถึงบริการแผนที่เช่น Google Maps
ในตัวอย่างด้านล่างละติจูดและลองจิจูดกลับถูกนำมาใช้เพื่อแสดงตำแหน่งใน Google แผนที่ (using a static image) :
ตัวอย่าง
function showPosition(position) {
var latlon = position.coords.latitude + "," + position.coords.longitude;
var img_url = "http://maps.googleapis.com/maps/api/staticmap?center=
"+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
} ลองตัวเอง» Google Map สคริปต์
วิธีการแสดงการโต้ตอบ Google Map มีเครื่องหมายซูมและตัวเลือกการลาก
ข้อมูลเฉพาะสถานที่
หน้านี้แสดงให้เห็นถึงวิธีการที่จะแสดงตำแหน่งของผู้ใช้บนแผนที่
Geolocation ยังเป็นประโยชน์อย่างมากสำหรับข้อมูลเฉพาะสถานที่เช่น:
- up-to-date ข้อมูลท้องถิ่น
- แสดงจุดที่น่าสนใจอยู่ใกล้กับผู้ใช้
- เปิดโดยหันนำทาง (GPS)
getCurrentPosition() วิธีการ - ข้อมูลย้อนกลับ
getCurrentPosition() วิธีการส่งกลับวัตถุถ้ามันจะประสบความสำเร็จ เส้นรุ้งเส้นแวงและความถูกต้องคุณสมบัติจะถูกส่งกลับเสมอ คุณสมบัติอื่น ๆ จะถูกส่งกลับถ้ามี:
| คุณสมบัติ | ผลตอบแทน |
|---|---|
| coords.latitude | ละติจูดเป็นตัวเลขทศนิยม |
| coords.longitude | ลองจิจูดเป็นตัวเลขทศนิยม |
| coords.accuracy | ความถูกต้องของตำแหน่ง |
| coords.altitude | ระดับความสูงเป็นเมตรเหนือระดับน้ำทะเลปานกลาง |
| coords.altitudeAccuracy | ความแม่นยำสูงของตำแหน่ง |
| coords.heading | หัวเรื่องเป็นองศาตามเข็มนาฬิกาจากทิศตะวันตกเฉียงเหนือ |
| coords.speed | ความเร็วในเมตรต่อวินาที |
| timestamp | วันที่ / เวลาของการตอบสนอง |
วัตถุ Geolocation - วิธีที่น่าสนใจอื่น ๆ
watchPosition() - ส่งคืนตำแหน่งปัจจุบันของผู้ใช้และยังคงกลับมาตำแหน่งปรับปรุงตามการเคลื่อนไหวของผู้ใช้ (like the GPS in a car)
clearWatch() - หยุด watchPosition() วิธีการ
ตัวอย่างด้านล่างนี้แสดงให้เห็นถึง watchPosition() วิธีการ คุณจำเป็นต้องมีอุปกรณ์ GPS ที่ถูกต้องในการทดสอบนี้ (like iPhone ) :
ตัวอย่าง
<script>
var 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> ลองตัวเอง»