บริการที่ได้รับความนิยมมากขึ้นเรียกว่าบริการตามตำแหน่ง (LBS) บริการประเภทนี้เป็นข้อมูลที่องค์กรใช้พื้นที่ใกล้กับพิกัดของจุดหนึ่ง (เช่นตำแหน่งที่ผู้ใช้อยู่) เช่นบริการที่เกี่ยวข้องกับแผนที่ทั่วไป ใน HTML5 มีการเพิ่ม API ตำแหน่งทางภูมิศาสตร์ใหม่เพื่อกำหนดและแบ่งปันตำแหน่งทางภูมิศาสตร์
คำแถลงความเป็นส่วนตัวความเป็นส่วนตัวเป็นข้อกังวลเมื่อแชร์ตำแหน่งทางกายภาพกับเว็บเซิร์ฟเวอร์ระยะไกล ดังนั้น API GEOLOCATION กำหนดให้ผู้ใช้ต้องให้สิทธิ์ก่อนที่เว็บแอปพลิเคชันสามารถเข้าถึงข้อมูลตำแหน่ง เมื่อคุณเข้าถึงเว็บเพจที่ร้องขอข้อมูลตำแหน่งทางภูมิศาสตร์เป็นครั้งแรกเบราว์เซอร์จะแสดงแถบการแจ้งเตือนที่แจ้งให้คุณทราบถึงตำแหน่งของผู้ใช้ ทำตามพรอมต์ของเบราว์เซอร์และเลือกการอนุญาตที่เกี่ยวข้อง
หากผู้ใช้ไม่ให้สิทธิ์ข้อมูลตำแหน่งไม่ได้ให้ไว้ในเว็บแอปพลิเคชัน การโทร API ที่เกี่ยวข้องจะไม่เรียกการโทรกลับที่ประสบความสำเร็จ
ตรวจสอบการสนับสนุนเบราว์เซอร์API Geolocation ได้รับการสนับสนุนในเบราว์เซอร์กระแสหลักรุ่นล่าสุด แต่เพื่อให้เข้ากันได้กับเบราว์เซอร์เก่าคุณยังต้องตรวจสอบ หากไม่สามารถใช้งาน Geolocation API ได้ Window.navigator.geolocation จะเป็นโมฆะดังนี้:
function show_islocationenabled ()
-
var str = "ไม่ไม่รองรับตำแหน่งทางภูมิศาสตร์";
if (window.navigator.geolocation) {
str = "ใช่รองรับตำแหน่งทางภูมิศาสตร์";
-
การแจ้งเตือน (STR);
-
API Geolocation API ขึ้นอยู่กับคุณสมบัติใหม่ของการนำทางทั่วโลกวัตถุ: Navigator.geolocation ซึ่งให้ข้อมูลที่เป็นประโยชน์เกี่ยวกับเบราว์เซอร์และระบบของผู้เข้าชม ข้อมูลตำแหน่งทางภูมิศาสตร์สามารถรับได้ด้วยวิธีการมากมายเช่นสถานีฐานฐานข้อมูลเว็บหรือ GPS ความถูกต้องของข้อมูลตำแหน่งทางภูมิศาสตร์ที่ได้รับโดยใช้วิธีการที่แตกต่างกันก็แตกต่างกันเช่นกัน โดยทั่วไปแล้วสิ่งที่แม่นยำที่สุดจะได้รับผ่าน GPS (GPS ส่วนใหญ่ใช้บนแพลตฟอร์มมือถือและแพลตฟอร์มพีซีโดยทั่วไปอาศัยข้อมูลเครือข่าย) โดยบังเอิญในบางสถานที่คุณอาจไม่สามารถรับการอ่านที่ตั้งทางภูมิศาสตร์ที่ชัดเจนหรือไม่ได้รับข้อมูล
จัดตำแหน่งตำแหน่งปัจจุบันใช้วิธีการ getCurrentPosition () ของการนำทาง GEOLOCATION เพื่อรับตำแหน่งปัจจุบันของผู้ใช้ วิธีนี้จะได้รับข้อมูลตำแหน่งเพียงครั้งเดียว เมื่อสคริปต์วิธีการถูกเรียกใช้วิธีการพยายามที่จะได้รับตำแหน่งปัจจุบันของอุปกรณ์โฮสต์ในลักษณะอะซิงโครนัส
Method Signature: GetCurrentPosition (GeolocationsuccessCallback, [GeolocationerRorCallback, GeolocationOptions]);
1. GeolocationsuccessCallback: รับการโทรกลับหลังจากตำแหน่งปัจจุบันสำเร็จ (จำเป็น)
2. GeolocationerRorCallback การโทรกลับใช้เมื่อเกิดข้อผิดพลาด (เป็นทางเลือก)
3. GeolocationOptions ตัวเลือกตำแหน่งทางภูมิศาสตร์ (ไม่บังคับ)
ประมวลผลข้อมูลตำแหน่ง
หลังจากวิธี getCurrentPositon () ได้รับตำแหน่งปัจจุบันสำเร็จแล้วมันจะบันทึกข้อมูลตำแหน่งไปยังวัตถุตำแหน่งแล้วใช้วัตถุนี้เป็นพารามิเตอร์เพื่อเรียกใช้การเรียกกลับของ GeolocationSuccessCallback ในฟังก์ชั่นการโทรกลับนี้คุณสามารถจัดการข้อมูลที่มีอยู่ในวัตถุนี้โดยพลการ
วัตถุตำแหน่งมีสองคุณสมบัติ: การประทับเวลาและ coords แอตทริบิวต์ Timestamp แสดงถึงเวลาในการสร้างของข้อมูลตำแหน่งทางภูมิศาสตร์และแอตทริบิวต์ Coords แสดงถึงข้อมูลตำแหน่งทางภูมิศาสตร์และมีเจ็ดแอตทริบิวต์:
.Coords.latitude: ประเมินละติจูด
- coords.longitude: ประมาณลองจิจูด
.Coords.Altitude: ความสูงโดยประมาณ
- coords.curacy: ความแม่นยำของการประมาณลองจิจูดและละติจูดที่มีให้ในเมตร
.Coords.altitudeaccuracy: ความแม่นยำของการประมาณความสูงที่ให้ไว้ในเมตร
- พิกัดหัว: ทิศทางเชิงมุมของอุปกรณ์โฮสต์กำลังเคลื่อนที่คำนวณตามเข็มนาฬิกาเมื่อเทียบกับทิศทางทิศเหนือ
.COORDS.SPEED: ความเร็วพื้นดินปัจจุบันของอุปกรณ์เป็นเมตรต่อวินาที
โดยทั่วไปแล้วคุณสมบัติสามประการเหล่านี้รับประกันได้ว่า: coords.latitude, coords.longitude และ coords.curacy และส่วนที่เหลือกลับ null; ขึ้นอยู่กับความสามารถของอุปกรณ์และเซิร์ฟเวอร์ตำแหน่งแบ็กเอนด์ที่ใช้ นอกจากนี้คุณสมบัติส่วนหัวและความเร็วสามารถคำนวณได้ตามตำแหน่งก่อนหน้าของผู้ใช้
การจัดการข้อผิดพลาดหากมีข้อผิดพลาดเกิดขึ้นเมื่อดำเนินการวิธีการ getCurrentPositon () วิธีการจะส่งผ่านวัตถุตำแหน่งที่เป็นไปได้ที่การเรียกกลับ geolocationerRorCallback
ตั้งค่าตัวเลือกตำแหน่งทางภูมิศาสตร์คุณสามารถตั้งค่าคุณสมบัติสามประการของ geolocationOptions:
EnableHighcuracy: หากอุปกรณ์รองรับความแม่นยำสูงตัวเลือกนี้จะระบุว่าเปิดใช้งานความแม่นยำสูงหรือไม่
หมดเวลา: การสืบค้นหมดเวลา
สูงสุด: จำนวนครั้งสูงสุดของแคชจะอยู่ในระหว่างที่สามารถใช้แคชได้
ดูตัวอย่างที่สมบูรณ์ด้านล่าง:
<! doctype html>
<html>
<body>
<p id = "ตัวอย่าง"> คลิกปุ่มเพื่อรับตำแหน่งของคุณ: </p>
<ปุ่ม onclick = "getLocation ()"> ลองใช้ </ button>
<div id = "maholder"> </div>
<script>
var x = document.getElementById ("สาธิต");
ฟังก์ชั่น getLocation () {
if (navigator.geolocation) {
Navigator.geolocation.getCurrentPosition (การจัดแสดง, อาบน้ำ);
-
อื่น{
X.InnerHtml = "ตำแหน่งทางภูมิศาสตร์ไม่ได้รับการสนับสนุนโดยเบราว์เซอร์นี้";
-
-
ฟังก์ชั่น Showposition (ตำแหน่ง) {
var latlon = position.coords.latitude+","+position.coords.longitude;
var img_url = "http://maps.googleapis.com/maps/api/staticmap?center=" +
latlon + "& zoom = 9 & size = 400x300 & sensor = false";
document.getElementById ("maholder"). innerhtml = "<img src = '"+img_url+"' />";
-
ฟังก์ชั่น Showerror (ข้อผิดพลาด) {
switch (error.code) {
ข้อผิดพลาดกรณี Permission_denied:
x.innerhtml = "ผู้ใช้ปฏิเสธคำขอสำหรับตำแหน่งทางภูมิศาสตร์"
หยุดพัก;
ข้อผิดพลาดกรณี position_unavailable:
x.innerhtml = "ข้อมูลตำแหน่งไม่พร้อมใช้งาน"
หยุดพัก;
ข้อผิดพลาดกรณีเวลา:
x.innerhtml = "คำขอเพื่อให้ตำแหน่งผู้ใช้หมดเวลา"
หยุดพัก;
ข้อผิดพลาดกรณี. unknown_error:
x.innerhtml = "เกิดข้อผิดพลาดที่ไม่รู้จัก"
หยุดพัก;
-
-
</script>
</body>
</html>
ตัวอย่างนี้ใช้ที่ตั้งทางภูมิศาสตร์ของอุปกรณ์ปัจจุบันและแสดงใน Google Maps แน่นอนว่าคุณสามารถใช้เวอร์ชันกราฟแบบคงที่ใน Baidu Maps API เพื่อแปลงตัวอย่างนี้ สำหรับ Baidu Map API โปรดดูลิงก์ในการอ้างอิงที่เป็นประโยชน์ในภายหลัง
เปิด/ยกเลิกการวางตำแหน่งอย่างต่อเนื่องใช้วิธีการ WatchPosition () ของการนำทาง GEOLOCATION เพื่อสำรวจตำแหน่งของผู้ใช้เป็นประจำเพื่อดูว่าตำแหน่งของผู้ใช้มีการเปลี่ยนแปลงหรือไม่ วิธีนี้มีพารามิเตอร์สามพารามิเตอร์: พารามิเตอร์ทั้งสามนี้เหมือนกับวิธี getCurrentPosition (), การโทรกลับที่ประสบความสำเร็จ, การโทรกลับที่ล้มเหลวและตัวเลือกในการรับข้อมูลตำแหน่ง; วิธีนี้มีค่าส่งคืนค่าเฝ้าดูซึ่งใช้ในการยกเลิกการวางตำแหน่งอย่างต่อเนื่อง
ใช้วิธีการ ClearWatch () ของการนำทาง GEOLOCATION เพื่อยุติ WatchPosition () อย่างต่อเนื่องซึ่งใช้เวลาเพียงหนึ่งพารามิเตอร์
ดูตัวอย่างต่อไปนี้:
<! doctype html>
<html>
<head>
<tite> ตัวอย่าง API GeoLocation: การฟังการอัปเดตตำแหน่ง </title>
<meta http-equiv = "x-ua ที่เข้ากันได้" เนื้อหา = "ie = 9" />
<script type = "text/javascript">
ฟังก์ชั่น setText (val, e) {
document.getElementById (e) .Value = val;
-
var nav = null;
var watchid;
ฟังก์ชั่น ListenFositionUpdates () {
if (nav == null) {
nav = window.navigator;
-
if (nav! = null) {
var geoloc = nav.geolocation;
ถ้า (geoloc! = null) {
watchId = geoloc.watchposition (SuccessCallback);
-
อื่น {
การแจ้งเตือน ("ไม่รองรับตำแหน่งทางภูมิศาสตร์");
-
-
อื่น {
การแจ้งเตือน ("ไม่พบ Navigator");
-
-
ฟังก์ชั่น ClearWatch (watchId) {
window.navigator.geolocation.clearwatch (watchid);
-
ฟังก์ชั่น SuccessCallback (ตำแหน่ง)
-
SetText (position.coords.latitude, "Latitude");
SetText (position.coords.longitude, "ลองจิจูด");
-
</script>
</head>
<body>
<label for = "Latitude"> Latitude: < /label> <input id = "Latitude" />>>
<label for = "longitude"> ลองจิจูด: < /label> <input id = "Longitude" />>>
<อินพุต type = "button" value = "ดูละติจูดและลองจิจูด" onclick = "ListenforPositionUpdates ()" />
<อินพุต type = "button" value = "Clear Watch" OnClick = "ClearWatch ()" />
</body>
</html>
การอ้างอิงเชิงปฏิบัติ:เอกสารอย่างเป็นทางการ: http://www.w3schools.com/html5/html5_geolocation.asp
ความกังวลเทมเพลต: http://www.cuoxin.com/w3school/html5/
วิธีใช้ Microsoft: http://msdn.microsoft.com/zh-cn/library/gg589502(v=vs.85)
Baidu Map API: http://dev.baidu.com/wiki/static/index.htm