สรุปการพัฒนาและการประยุกต์ใช้การจัดตำแหน่งตำแหน่งทางภูมิศาสตร์ส่วนต่อประสาน API ใน HTML5

หลายวิธีในการค้นหาตำแหน่งทางภูมิศาสตร์: ที่อยู่ IP, GPS, WiFi, GSM/CDMA

1. ผู้ใช้เปิดเว็บแอปพลิเคชันที่ต้องได้รับตำแหน่งทางภูมิศาสตร์

2. แอปพลิเคชันร้องขอเบราว์เซอร์ไปยังที่ตั้งทางภูมิศาสตร์และเบราว์เซอร์ปรากฏขึ้นแบบสอบถามเพื่อถามว่าผู้ใช้กำลังแชร์ที่ตั้งทางภูมิศาสตร์หรือไม่

3. สมมติว่าผู้ใช้อนุญาตให้ใช้งานได้เบราว์เซอร์จะสอบถามข้อมูลที่เกี่ยวข้องจากการตั้งค่า

4. เบราว์เซอร์ส่งข้อมูลที่เกี่ยวข้องไปยังเซิร์ฟเวอร์ตำแหน่งที่เชื่อถือได้และเซิร์ฟเวอร์จะกลับไปยังตำแหน่งทางภูมิศาสตร์ที่เฉพาะเจาะจง

1. ใช้เทคโนโลยีการรับผู้ใช้ตามเบราว์เซอร์ (ไม่จำเป็นต้องสนับสนุนแบ็กเอนด์)

2. ค้นหาตำแหน่งทางภูมิศาสตร์ของผู้ใช้อย่างถูกต้อง (ความแม่นยำสูงถึง 10 เมตรขึ้นอยู่กับอุปกรณ์)

3. ติดตามตำแหน่งทางภูมิศาสตร์ของผู้ใช้อย่างต่อเนื่อง

4. ข้อมูลตำแหน่งที่มีปฏิสัมพันธ์กับแผนที่ Google หรือ Baidu Map

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

ก่อนอื่นให้ดูที่เบราว์เซอร์ที่รองรับ API GEOLOCATION:

IE9.0+, FF3.5+, Safari5.0+, Chrome5.0+, OperA10.6+, iPhone3.0+, Android2.0+

API Geolocation มีอยู่ในวัตถุ Navigator และมีเพียง 3 วิธีเท่านั้น:

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

2. WatchPosition // ตำแหน่งการตรวจสอบ

3. Clearwatch // การตรวจสอบล้าง

navigator.geolocation.getCurrentPosition (…, ฟังก์ชั่น (ข้อผิดพลาด) {

switch (error.code) {

ข้อผิดพลาดกรณีเวลา:

การแจ้งเตือน ("หมดเวลาการเชื่อมต่อโปรดลองอีกครั้ง");

หยุดพัก;

ข้อผิดพลาดกรณี Permission_denied:

การแจ้งเตือน ("คุณปฏิเสธการใช้บริการแชร์ตำแหน่งแบบสอบถามถูกยกเลิก");

หยุดพัก;

ข้อผิดพลาดกรณี position_unavailable:

การแจ้งเตือน ("ขออภัยคุณไม่สามารถให้บริการสถานที่ให้กับโลกของคุณในขณะนี้");

หยุดพัก;

-

-

WatchPosition เป็นเหมือนตัวติดตามที่จับคู่กับ Clearwatch

WatchPosition เป็นเหมือนวิธีการทำงานของ setInterval และ clearinterval

var watchPositionId = navigator.geolocation.watchposition (success_callback, error_callback, ตัวเลือก);

Navigator.geolocation.ClearWatch (WatchPositionID);

HTML 5 มีชุดของ API เช่นที่ตั้งทางภูมิศาสตร์สำหรับผู้ใช้ในการใช้งานซึ่งช่วยให้ผู้ใช้สามารถสร้างแอพพลิเคชั่นทางภูมิศาสตร์ LBS ครั้งแรกในเบราว์เซอร์ที่รองรับ HTML 5 เมื่อเปิด API จะถามว่าผู้ใช้ตกลงที่จะใช้ API หรือไม่มิฉะนั้นจะไม่เปิดใช้งาน

ฟังก์ชั่น iSgeOlocationApiaVailable ()

-

var location = "ไม่การตั้งค่าทางภูมิศาสตร์ไม่ได้รับการสนับสนุนโดยเบราว์เซอร์นี้";

if (window.navigator.geolocation) {

location = "ใช่การจัดสรรทางภูมิศาสตร์ได้รับการสนับสนุนโดยเบราว์เซอร์นี้";

-

การแจ้งเตือน (ตำแหน่ง);

-

ในตัวอย่างข้างต้นข้อยกเว้นก็ถูกจับในวิธี DisplayError;

สิ่งนี้ทำได้โดยใช้ getCurrentPosition;

function requestposition () {

if (nav == null) {

nav = window.navigator;

-

if (nav! = null) {

var geoloc = nav.geolocation;

ถ้า (geoloc! = null) {

geoloc.getCurrentPosition (SuccessCallback);

-

อื่น {

การแจ้งเตือน ("Geolocation API ไม่ได้รับการสนับสนุนในเบราว์เซอร์ของคุณ");

-

-

อื่น {

การแจ้งเตือน ("ไม่พบ Navigator");

-

-

เมื่อได้รับที่ตั้งทางภูมิศาสตร์ได้สำเร็จจะมีการสร้างวิธีการโทรกลับเพื่อประมวลผลผลลัพธ์ที่ส่งคืน

ฟังก์ชัน setLocation (val, e) {

document.getElementById (e) .Value = val;

-

ฟังก์ชั่น SuccessCallback (ตำแหน่ง)

-

SetLocation (position.coords.latitude, "Latitude"); setLocation (position.coords.longitude, "ลองจิจูด");

-

1 watchposition

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

ฟังก์ชั่น ListenFositionUpdates () {

if (nav == null) {

nav = window.navigator;

-

if (nav! = null) {

var geoloc = nav.geolocation;

ถ้า (geoloc! = null) {

watchId = geoloc.watchposition (SuccessCallback);

} อื่น {

การแจ้งเตือน ("Geolocation API ไม่ได้รับการสนับสนุนในเบราว์เซอร์ของคุณ");

-

} อื่น {

การแจ้งเตือน ("ไม่พบ Navigator");

-

-

จากนั้นใน SuccessCallback คุณสามารถตั้งค่าตำแหน่งทางภูมิศาสตร์ล่าสุดเพื่อแสดง:

ฟังก์ชั่น SuccessCallback (ตำแหน่ง) {

SetText (position.coords.latitude, "Latitude"); SetText (position.coords.longitude, "ลองจิจูด");

-

หากคุณไม่ต้องการติดตามแบบเรียลไทม์คุณสามารถยกเลิกได้:

ฟังก์ชั่น ClearWatch (watchId) {

window.navigator.geolocation.clearwatch (watchid);

-

เมื่อพบข้อยกเว้นคุณสามารถจับได้:

ถ้า (geoloc! = null) {

geoloc.getCurrentPosition (SuccessCallback, ErrorCallback);

-

ฟังก์ชั่น ErrorCallback (ข้อผิดพลาด) {

var message = "";

switch (error.code) {

ข้อผิดพลาดกรณี Permission_denied:

message = "เว็บไซต์นี้ไม่มีสิทธิ์ใช้งาน"

+ "The Geolocation API";

หยุดพัก;

ข้อผิดพลาดกรณี position_unavailable:

ข้อความ = "ไม่สามารถกำหนดตำแหน่งปัจจุบันได้";

หยุดพัก;

ข้อผิดพลาดกรณี Permission_denied_timeout:

ข้อความ = "ไม่สามารถกำหนดตำแหน่งปัจจุบันได้"

+ "ภายในระยะเวลาหมดเวลาที่กำหนด";

หยุดพัก;

-

if (message == "") {

var strerrorCode = error.code.toString ();

message = "ไม่สามารถกำหนดตำแหน่งได้เนื่องจาก"

+ "ข้อผิดพลาดที่ไม่รู้จัก (รหัส:" + strerrorCode + ")";

-

การแจ้งเตือน (ข้อความ);

-

ฟังก์ชั่น getCurrentLocation ()

-

if (navigator.geolocation)

-

Navigator.geolocation.getCurrentPosition (showmyposition, showerror);

-

อื่น

-

การแจ้งเตือน ("ไม่, API ตำแหน่งทางภูมิศาสตร์ไม่ได้รับการสนับสนุนโดยเบราว์เซอร์นี้");

-

-

ฟังก์ชั่น showmyposition (ตำแหน่ง)

-

var coordinates = position.coords.latitude+","+position.coords.longitude;

var map_url = "http://maps.googleapis.com/maps/api/staticmap?center="

+พิกัด+"& ซูม = 14 & size = 300x300 & เซ็นเซอร์ = false";

document.getElementById ("googlemap"). innerhtml = "<img src = '"+map_url+"' />";

-

ฟังก์ชั่นอาบน้ำ (ข้อผิดพลาด)

-

switch (error.code)

-

ข้อผิดพลาดกรณี Permission_denied:

การแจ้งเตือน ("เว็บไซต์นี้ไม่ได้รับอนุญาตให้ใช้ GEOLOCATION API")

หยุดพัก;

ข้อผิดพลาดกรณี position_unavailable:

การแจ้งเตือน ("ไม่สามารถระบุตำแหน่งปัจจุบันได้")

หยุดพัก;

ข้อผิดพลาดกรณีเวลา:

การแจ้งเตือน ("ตำแหน่งปัจจุบันไม่สามารถกำหนดได้ภายในระยะเวลาที่กำหนด")

หยุดพัก;

ข้อผิดพลาดกรณี. unknown_error:

การแจ้งเตือน ("ไม่สามารถกำหนดตำแหน่งได้เนื่องจากข้อผิดพลาดที่ไม่รู้จัก")

หยุดพัก;

-

-