วิธีใช้ฟังก์ชั่นการวางตำแหน่งตำแหน่งทางภูมิศาสตร์ HTML5

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

HTML5 จัดเตรียม API Geolocation เพื่อกำหนดตำแหน่งผู้ใช้ เราสามารถใช้คุณสมบัติของ HTML5 นี้เพื่อพัฒนาแอปพลิเคชันตามข้อมูลตำแหน่งทางภูมิศาสตร์ บทความนี้รวมตัวอย่างเพื่อแบ่งปันวิธีการใช้ HTML5 และใช้อินเทอร์เฟซ Baidu และ Google Map เพื่อรับข้อมูลตำแหน่งทางภูมิศาสตร์ที่ถูกต้องของผู้ใช้

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

1. functiongetLocation () {
2. if (navigator.geolocation) {
3. Navigator.geolocation.getCurrentPosition (การจัดแสดง, อาบน้ำ);
4. }อื่น{
5. การแจ้งเตือน (เบราว์เซอร์ไม่รองรับตำแหน่งทางภูมิศาสตร์);
6. -
7. -

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

ก่อนอื่นให้ดูที่ฟังก์ชั่น showerror () ซึ่งระบุการจัดการรหัสข้อผิดพลาดบางอย่างเมื่อได้รับตำแหน่งทางภูมิศาสตร์ของผู้ใช้:

1. functionShowerror (ข้อผิดพลาด) {
2. switch (error.code) {
3. caseerror.permission_denied:
4. การแจ้งเตือน (การแปลล้มเหลวผู้ใช้ปฏิเสธที่จะขอตำแหน่งทางภูมิศาสตร์);
5. หยุดพัก;
6. caseerror.position_unavailable:
7. การแจ้งเตือน (การแปลล้มเหลวข้อมูลตำแหน่งไม่พร้อมใช้งาน);
8. หยุดพัก;
9. caseerror.timeout:
10. การแจ้งเตือน (การค้นหาล้มเหลวขอให้ได้รับการหมดเวลาตำแหน่งผู้ใช้);
11. หยุดพัก;
12. caseerror.unknown_error:
13. การแจ้งเตือน (การแปลล้มเหลวระบบการวางตำแหน่งล้มเหลว);
14. หยุดพัก;
15. -
16. -

ลองดูที่ฟังก์ชั่น Showposition () และเรียกละติจูดและลองจิจูดของ Coords เพื่อให้ได้ละติจูดและลองจิจูดของผู้ใช้

1. functionShowPosition (ตำแหน่ง) {
2. varlat = position.coords.latitude; // Latitude
3. varlag = position.coords.longitude; // ลองจิจูด
4. การแจ้งเตือน ('lat:'+lat+', ลองจิจูด:'+lag);
5. -

ใช้ Baidu Maps และ Google Maps Interfaces เพื่อรับที่อยู่ผู้ใช้

ตามที่เราเข้าใจว่าการวางตำแหน่งทางภูมิศาสตร์ของ HTML5 สามารถรับละติจูดและลองจิจูดของผู้ใช้สิ่งที่เราต้องทำคือการแปลงละติจูดที่เป็นนามธรรมและลองจิจูดให้เป็นข้อมูลตำแหน่งทางภูมิศาสตร์ผู้ใช้จริงที่มีความหมาย โชคดีที่ Baidu Maps และ Google Maps ให้อินเทอร์เฟซในเรื่องนี้ เราจำเป็นต้องส่งผ่านข้อมูลละติจูดและลองจิจูดที่ได้รับจาก HTML5 ไปยังอินเตอร์เฟสแผนที่และจะส่งคืนที่ตั้งทางภูมิศาสตร์ของผู้ใช้รวมถึงข้อมูลจังหวัดเทศบาลและภูมิภาคและข้อมูลที่ตั้งทางภูมิศาสตร์โดยละเอียดเช่นถนนและหมายเลขบ้าน

ก่อนอื่นเรากำหนด DIV เพื่อแสดงตำแหน่งทางภูมิศาสตร์บนหน้าและกำหนด ID#baidu_geo และ id#google_geo ตามลำดับ เราเพียงแค่ต้องแก้ไขการจัดแสดงฟังก์ชั่นคีย์ () ก่อนอื่นให้ดูที่การโต้ตอบอินเตอร์เฟสแผนที่ Baidu เราส่งข้อมูลละติจูดและลองจิจูดไปยังอินเทอร์เฟซแผนที่ Baidu ผ่าน AJAX และอินเทอร์เฟซจะส่งคืนข้อมูลจังหวัดเทศบาลและถนนที่เกี่ยวข้อง Baidu Map Interface ส่งคืนสตริงของข้อมูล JSON และเราสามารถแสดงข้อมูลที่ต้องการไปยัง div#baidu_geo ตามความต้องการของเรา โปรดทราบว่า jQuery library ถูกใช้ที่นี่และไฟล์ jQuery Library จะต้องโหลดก่อน

1. functionShowPosition (ตำแหน่ง) {
2. varlatlon = position.coords.latitude+','+position.coords.longitude;
4. // baidu
5. varurl = http: //api.map.baidu.com/geocoder/v2/? ak = c93b5178d7a8ebdb830b9b557abce78b & callback = renderreverse & location =+latlon+& output = json & json & pois = 0;
6. $ .ajax ({
7. ประเภท: รับ,
8. ข้อมูล: JSONP,
9. URL: URL
10. beforesend: function () {
11. $ (#baidu_geo) .html ('ค้นหา ... ');
12. -
13. ความสำเร็จ: ฟังก์ชั่น (JSON) {
14. if (json.status == 0) {
15. $ (#baidu_geo) .html (json.result.formatted_address);
16. -
17. -
18. ข้อผิดพลาด: ฟังก์ชั่น (xmlhttprequest, textstatus, errorthrown) {
19. $ (#baidu_geo) .html (ตำแหน่ง Latlon+ที่อยู่ล้มเหลว);
20. -
21. -
22. -

มาดูการโต้ตอบอินเทอร์เฟซ Google Maps ในทำนองเดียวกันเราส่งข้อมูลละติจูดและลองจิจูดไปยังอินเทอร์เฟซ Google Maps ผ่าน AJAX และอินเทอร์เฟซจะส่งคืนรายละเอียดจังหวัดเมืองและถนนที่สอดคล้องกัน อินเทอร์เฟซ Google Maps ยังส่งคืนสตริงของข้อมูล JSON ข้อมูล JSON เหล่านี้มีรายละเอียดมากกว่าข้อมูลที่ส่งคืนโดยอินเตอร์เฟส Baidu Maps เราสามารถแสดงข้อมูลที่จำเป็นเพื่อ div#google_geo ตามความต้องการของเรา

1. functionShowPosition (ตำแหน่ง) {
2. varlatlon = position.coords.latitude+','+position.coords.longitude;
4. //Google
5. varurl = 'http: //maps.google.cn/maps/api/geocode/json? latlng ='+latlon+'& language = cn';
6. $ .ajax ({
7. ประเภท: รับ,
8. URL: URL
9. beforesend: function () {
10. $ (#google_geo) .html ('ค้นหา ... ');
11. -
12. ความสำเร็จ: ฟังก์ชั่น (JSON) {
13. if (json.status == 'ok') {
14. varresults = json.results;
15. $ .Each (ผลลัพธ์, ฟังก์ชั่น (ดัชนี, อาร์เรย์) {
16. if (index == 0) {
17. $ (#google_geo) .html (array ['formated_address']);
18. -
19. -
20. -
21. -
22. ข้อผิดพลาด: ฟังก์ชั่น (xmlhttprequest, textstatus, errorthrown) {
23. $ (#google_geo) .html (ตำแหน่ง Latlon+ที่อยู่ล้มเหลว);
24. -
25. -
26. -

รหัสด้านบนรวมอินเทอร์เฟซแผนที่ Baidu และอินเทอร์เฟซ Google Map เข้ากับฟังก์ชั่น Showposition () ตามลำดับและเราสามารถเรียกได้ตามสถานการณ์จริง แน่นอนว่านี่เป็นเพียงแอปพลิเคชันที่เรียบง่าย เราสามารถพัฒนาแอพพลิเคชั่นที่ซับซ้อนมากมายตามตัวอย่างง่ายๆนี้ ขอแนะนำให้ใช้เบราว์เซอร์มือถือเพื่อเข้าถึงการสาธิตการสาธิต