HTML5 geopositioning
HTML5 Geolocation (geopositioning) ใช้ในการค้นหาตำแหน่งของผู้ใช้
ค้นหาตำแหน่งของผู้ใช้
HTML5 Geolocation API ที่จะได้รับตำแหน่งของผู้ใช้
ในมุมมองของคุณลักษณะนี้อาจละเมิดความเป็นส่วนตัวของผู้ใช้เว้นแต่ผู้ใช้ตกลงที่มิฉะนั้นข้อมูลตำแหน่งของผู้ใช้จะไม่สามารถใช้ได้
สนับสนุนเบราว์เซอร์
Internet Explorer 9 +, Firefox, Chrome, Safari และ Opera สนับสนุน Geolocation (ที่ตั้งทางภูมิศาสตร์)
หมายเหตุ: Geolocation (geopositioning) สำหรับอุปกรณ์ที่มีจีพีเอสเช่น iPhone, geopositioning ถูกต้องมากขึ้น
HTML5 - ใช้กำหนดเป้าหมายทางภูมิศาสตร์
ใช้ getCurrentPosition () วิธีการที่จะได้รับตำแหน่งของผู้ใช้
ตัวอย่างต่อไปนี้เป็นตัวอย่างเช่นตำแหน่งทางภูมิศาสตร์ที่เรียบง่ายผู้ใช้สามารถกลับไปที่ละติจูดและลองจิจูดสถานที่:
ตัวอย่าง
ฟังก์ชั่น getLocation ()
{
ถ้า (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition (showPosition);
}
อื่น
{
x.innerHTML = "เบราว์เซอร์นี้ไม่สนับสนุนการตั้งรับ.";
}
}
ฟังก์ชั่น showPosition (ตำแหน่ง)
{
x.innerHTML = "เขต" + + position.coords.latitude
"<br> ลองจิจูด:" + position.coords.longitude;
}
ลอง»
ตัวอย่างการวิเคราะห์:
- จะมีการทดสอบสำหรับ geopositioning
- หากได้รับการสนับสนุนให้เรียกใช้ getCurrentPosition () วิธีการ ถ้าไม่ได้ก็จะแสดงข้อความให้กับผู้ใช้
- หาก getCurrentPosition () ประสบความสำเร็จในการทำงานเพื่อกลับพารามิเตอร์ที่กำหนดไว้ในพิกัดเป้าหมาย showPosition
- showPosition () ฟังก์ชันดึงและแสดงละติจูดและลองจิจูด
ตัวอย่างข้างต้นเป็นสคริปต์ geopositioning พื้นฐานมากจัดการปราศจากข้อผิดพลาด
การจัดการข้อผิดพลาดและปฏิเสธ
พารามิเตอร์ที่สอง getCurrentPosition () วิธีการในการจัดการข้อผิดพลาด มันระบุเมื่อฟังก์ชั่นที่ได้รับในการทำงานเมื่อตำแหน่งของผู้ใช้ล้มเหลว:
ตัวอย่าง
{
สวิทช์ (error.code)
{
กรณี error.PERMISSION_DENIED:
x.innerHTML = "ผู้ใช้จะได้รับการปฏิเสธคำขอตำแหน่ง."
break;
กรณี error.POSITION_UNAVAILABLE:
x.innerHTML = "ข้อมูลสถานที่ไม่พร้อมใช้งาน."
break;
กรณี error.TIMEOUT:
x.innerHTML = "ตำแหน่งของผู้ใช้ร้องขอหมดเวลา."
break;
กรณี error.UNKNOWN_ERROR:
x.innerHTML = "ข้อผิดพลาดที่ไม่รู้จัก".
break;
}
}
ลอง»
รหัสข้อผิดพลาด:
- อนุญาตปฏิเสธ - ผู้ใช้ไม่ได้รับอนุญาต geopositioning
- ตำแหน่งที่ใช้งานไม่ได้ - ไม่สามารถที่จะได้รับตำแหน่งปัจจุบัน
- หมดเวลา - การดำเนินการหมดเวลา
แสดงผลในแผนที่
หากต้องการแสดงผลในแผนที่ที่คุณจำเป็นต้องเข้าถึงสามารถใช้ละติจูดและลองจิจูดของบริการแผนที่เช่น Google Maps หรือแผนที่ Baidu:
ตัวอย่าง
{
var LatLon = position.coords.latitude + "" + position.coords.longitude;
var img_url = "http://maps.googleapis.com/maps/api/staticmap?center="
+ LatLon + "และซูม = 14 & size = 400x300 และเซ็นเซอร์ = false";
document.getElementById ( "mapholder") innerHTML = "<img src = '" + img_url + ""> ".;
}
ลอง»
ในตัวอย่างข้างต้นเราจะใช้เส้นรุ้งและเส้นแวงข้อมูลที่ส่งกลับโดยตำแหน่งจอแสดงผล (ใช้ภาพคงที่) บน Google Maps
สคริปต์ Google Maps
ที่ลิงค์ข้างต้นแสดงให้เห็นถึงวิธีการใช้สคริปต์เพื่อแสดงแผนที่แบบโต้ตอบมีเครื่องหมายซูมและตัวเลือกการลาก
หากต้องการข้อมูลสถานที่ที่กำหนด
หน้านี้แสดงให้เห็นถึงวิธีการแสดงตำแหน่งของผู้ใช้บนแผนที่ อย่างไรก็ตามข้อมูลตำแหน่งทางภูมิศาสตร์สำหรับสถานที่ที่กำหนดนอกจากนี้ยังเป็นประโยชน์อย่างมาก
ตัวอย่าง:
- อัพเดทข้อมูลท้องถิ่น
- จอแสดงจุดที่น่าสนใจรอบผู้ใช้
- ระบบนำทางรถยนต์เชิงโต้ตอบ (GPS)
getCurrentPosition () วิธีการ - ข้อมูลกลับมา
T ถ้าประสบความสำเร็จ getCurrentPosition () วิธีการส่งกลับวัตถุ เสมอกลับเส้นรุ้งเส้นแวงและคุณสมบัติความถูกต้อง หากมีคุณสมบัติดังต่อไปนี้เพิ่มเติมจะถูกส่งกลับ
| 属性 | 描述 |
|---|---|
| coords.latitude | 十进制数的纬度 |
| coords.longitude | 十进制数的经度 |
| coords.accuracy | 位置精度 |
| coords.altitude | 海拔，海平面以上以米计 |
| coords.altitudeAccuracy | 位置的海拔精度 |
| coords.heading | 方向，从正北开始以度计 |
| coords.speed | 速度，以米/每秒计 |
| timestamp | 响应的日期/时间 |
วัตถุ Geolocation - วิธีการที่น่าสนใจอื่น ๆ
watchPosition () - ส่งกลับที่ตั้งปัจจุบันของผู้ใช้และยังคงกลับมาตำแหน่งที่ปรับปรุง (เช่น GPS บนรถ) เมื่อย้ายผู้ใช้
clearWatch () - หยุด watchPosition () วิธีการ
ตัวอย่างต่อไปนี้แสดงให้เห็น watchPosition () วิธีการ คุณจำเป็นต้องมีอุปกรณ์ GPS ที่ถูกต้องในการทดสอบกรณี (เช่น iPhone):
ตัวอย่าง
ฟังก์ชั่น getLocation ()
{
ถ้า (navigator.geolocation)
{
navigator.geolocation.watchPosition (showPosition);
}
อื่น
{
x.innerHTML = "เบราว์เซอร์นี้ไม่สนับสนุนการตั้งรับ.";
}
}
ฟังก์ชั่น showPosition (ตำแหน่ง)
{
x.innerHTML = "เขต" + + position.coords.latitude
"<br> ลองจิจูด:" + position.coords.longitude;
}
ลอง»