ฉันเห็น Daniel และบล็อกที่เกี่ยวข้องจำนวนมากและไม่ค่อยได้อธิบายตำแหน่งทางภูมิศาสตร์ของ HTML5
ประการแรกเหตุผลของผู้ให้บริการเนื่องจากการวางตำแหน่งของ HTML5 นั้นจัดทำขึ้นโดย Google เนื่องจาก Google ได้บล็อกแผ่นดินใหญ่ฟังก์ชั่นการวางตำแหน่งไม่ได้รับการสนับสนุน
ประการที่สองการวางตำแหน่งทางภูมิศาสตร์มาพร้อมกับ HTML5 มีประสิทธิภาพที่ไม่ดี
1. คุณสมบัติใหม่ของการวางตำแหน่ง HTML5-Geographicalเนื่องจากการวางตำแหน่งทางภูมิศาสตร์เป็นคุณสมบัติใหม่ของ HTML5 เราจึงต้องเรียนรู้และเรียนรู้ APIs ที่เกี่ยวข้องและเรียนรู้วิธีการใช้ตำแหน่งทางภูมิศาสตร์
ก่อนเข้าใจสามัญสำนึก
ธรณีวิทยาคำนามใหม่:
มันถูกใช้เพื่อให้ได้พิกัดทางภูมิศาสตร์ที่เบราว์เซอร์ปัจจุบันตั้งอยู่เพื่อให้ LBS (บริการตามตำแหน่ง) ข้อมูล:
การเป็นอาหาร: ลองจิจูด
ละติจูด: ละติจูด
ระดับความสูง: ระดับความสูง
ความเร็ว: ความเร็ว
ใช้แพลตฟอร์มที่จะแบ่งออกเป็นมือถือและพีซีสิ้นสุด:
(1) เบราว์เซอร์มือถือ:
ก่อนอื่นลองใช้ ความแม่นยำของข้อมูล GPS ในตัวขึ้นอยู่กับข้าว
จากนั้นใช้หมายเลขสถานีฐานบนมือถือเพื่อย้อนกลับความแม่นยำของตำแหน่งทางภูมิศาสตร์ที่สอดคล้องกันอยู่ในหน่วย
(2) พีซีเบราว์เซอร์:
ย้อนกลับ แบบสอบถามผ่านที่อยู่ IP ของคอมพิวเตอร์-
หัวข้อ:
แล้วเราจะได้รับข้อมูลการวางตำแหน่งจาก HTML5 ได้อย่างไร?ก่อนอื่นเรากด F12 เพื่อเปิดคอนโซลในเบราว์เซอร์และป้อน window.navigator.geology เพื่อดูข้อมูลการวางตำแหน่ง!
เราเห็นว่ามีสามวิธีหลักในข้อมูลการวางตำแหน่งและความหมายคือ:
GetCurrentPosition: FN (succ, err) // รับข้อมูลตำแหน่งปัจจุบันซึ่งมี watchposition ซึ่งประสบความสำเร็จและไม่สามารถรับและล้มเหลวได้
ตั้งแต่นั้นมาเรารู้วิธีใช้ตำแหน่งทางภูมิศาสตร์ในไฟล์ HTML5
<! {// คลิกปุ่มเพื่อทริกเกอร์ navigator.geolocation.getCurrentPosition (succcb, errcb); จุดตัด console.log ('ประสบความสำเร็จในการรับข้อมูลการวางตำแหน่ง'); '+pos.coords.altitude); console.log (' ความเร็ว: '+pos.coords.speed); จุดตัด console.log ('รับข้อมูลการวางตำแหน่งที่ล้มเหลว'); }} </script> </body> </html>ดังที่แสดงในรูปเมื่อปุ่มคลิกข้อมูลตำแหน่งจะได้รับสำเร็จ แต่ความสูงและความเร็วเป็นโมฆะเนื่องจากด้านพีซีดังนั้นเราจึงต้องจำวิธีหนึ่งเพื่อให้ได้ตำแหน่งทางภูมิศาสตร์ใน HTML5!
navigator.geolocation.getCurrentPosotion (ฟังก์ชั่น (pos) {console.log ('' การได้มาซึ่งข้อมูลตำแหน่งที่ประสบความสำเร็จ '); // pos.coords.longtitude .... } (ERR) {console.log (' '); // err.code err.message}) 2. ใช้แผนที่เครื่องมือของบุคคลที่สาม Baiduดังที่ฉันได้กล่าวถึงในคำนำการใช้แผนที่ Baidu ในโครงการและแอปพลิเคชันมือถือจำนวนมากให้ผู้ใช้สามารถเลือกข้อมูลการวางตำแหน่งได้อย่างไร
ก่อนอื่นเราต้องรู้ว่าซอร์สโค้ดของแผนที่ Baidu จะไม่ถูกดาวน์โหลดให้กับทุกคน บริษัท มโนธรรมมากใช้!
ใช้ขั้นตอน:
ก่อนอื่นเปิดเว็บไซต์อย่างเป็นทางการ http://lbsyun.baidu.com/ จากนั้นดึงมันไปด้านล่าง:
จะเห็นได้ว่าแผนที่ Baidu สามารถใช้สำหรับการพัฒนาเว็บการพัฒนา Android การพัฒนา iOS ที่นี่เราใช้การพัฒนาเว็บและคลิก JavaScript API
URL: http://lbsyun.baidu.com/index.php?
เราสามารถไปหลายกรณีและแสดงฟังก์ชั่นใน API
ฉันจะอธิบายว่าคีย์คืออะไรในภายหลัง ป้อนโทรศัพท์มือถือที่เกี่ยวข้องกล่องจดหมายแล้วตรวจสอบในกล่องจดหมาย
กรอกชื่อแอปพลิเคชันตามต้องการ
การเลือกประเภทแอปพลิเคชัน --- เบราว์เซอร์ไนด์
รายชื่อผู้อ้างอิง: หมายถึงผู้ที่สามารถเข้าถึงแอปพลิเคชันของคุณคุณจะเข้าถึงแอปพลิเคชันของคุณได้อย่างไรในการเข้าถึงและกรอกหมายเลขดาว ' *' ที่นี่ซึ่งหมายความว่าทุกคนสามารถเข้าถึงได้เพราะสามารถทำการทดสอบได้เท่านั้นและ โครงการสามารถทำได้ในอนาคต จุดตัด จากนั้นคลิกส่งเพื่อให้การสร้างเสร็จสมบูรณ์! จุดตัด
หลังจากการสร้างแอปพลิเคชันอินเทอร์เฟซต่อไปนี้จะปรากฏขึ้น:
ที่นี่จะแสดงหมายเลขแอปพลิเคชันชื่อแอปพลิเคชันและรหัสแอปพลิเคชันการเข้าถึงที่สำคัญที่สุดที่สร้างขึ้นที่นี่ซึ่งเป็นคีย์ที่กล่าวถึงก่อนหน้านี้!
หลังจากได้รับกุญแจเรากลับไปที่หน้าแรก http://lbsyun.baidu.com/index.php?title=jspopular
คลิกที่คู่มือการพัฒนาทางด้านซ้ายคุณสามารถเห็นการใช้ API และกรณีที่เกี่ยวข้อง! จุดตัด API นี้เป็นความรู้สึกผิดชอบชั่วดีที่สุดใน API ไม่มีเรื่องไร้สาระ
การเขียนมีรายละเอียดมากและเข้าใจง่ายเพราะมีมากเกินไปเพียงแค่แนะนำการใช้งานหลักสองสามครั้งที่นี่! จุดตัด จุดตัด
เราสร้างไฟล์ HTML ใหม่และคัดลอกรหัสด้านบนไปยังไฟล์ HTML
<! = JRBP IU6JCBPSXGVDQXAC0C เวอร์ชันก่อนหน้าและวิธีการอ้างอิงเวอร์ชันก่อนหน้า: src = http://api.map.baidu.com/api? ความสูง: 500 px; อินสแตนซ์ของแผนที่เพื่อหลีกเลี่ยงน้ำหนักที่มีชื่อแผนที่ดังนั้นใช้ bmap.map var map = ใหม่ bmap.map (คอนเทนเนอร์); จุดศูนย์กลางจุดและระดับแผนที่ 1 ~ ~ ระดับ 18 แผนที่ Centerandzoom (จุด, 18); . ร่างกาย> </html>
ใช้แผนที่ Baidu:
ตกลงเราใช้แผนที่ Baidu ในไฟล์ HTML สำเร็จแล้ว จุดตัด
คำอธิบายฟังก์ชั่นที่เกี่ยวข้อง:
<script src = http://api.map.baidu.com/api?
ป้อนคีย์ Long Trunk ใน AK เพื่ออ้างถึงแผนที่ Baidu! จุดตัด
สร้าง MAP Instance-adple
var map = ใหม่ bmap.map (คอนเทนเนอร์);
สร้างจุดที่ระบุข้อมูลละติจูดและลองจิจูดของคุณ! จุดตัด หากคุณไม่ทราบคุณสามารถใช้อันก่อนหน้า
Navigator.Geology.GetCurrentPosotion วิธีการเลือกละติจูดและลองจิจูด-พระราชบัญญัติ
var point = ใหม่ bmap.point (116.300982,39.915907);
แสดงหมายเลขแผนที่ที่จุดกึ่งกลางเป็นจุดศูนย์กลาง 17 หมายถึงระดับและระดับสามารถแบ่งออกเป็นระดับ 1 ถึง 18 ยิ่งระดับของระดับเล็กลงช่วงของแผนที่จะยิ่งใหญ่ขึ้น ของระดับ จุดตัด --- ต้องเลือก
map.centerandzoom (จุด, 17);
แผนที่สามารถเลือกได้ด้วยตัวเลือกเมาส์ฟรี
map.enablescrollwheelzoom (จริง);
แผนที่แสดงเอฟเฟกต์การควบคุมได้รับการทดสอบด้วยตัวเอง
Map.addControl (ใหม่ bmap.navigationControl ());
แสดงฉลากบนแผนที่ (ฉลาก) -Optional
var marker = map.addoverlay (ใหม่ bmap.marker (จุด));
โอเคแผนที่ Baidu ที่สามได้รับการกล่าวถึงที่นี่มีฟังก์ชั่นสนุก ๆ มากมายที่สามารถใช้งานได้ด้วยตัวเองดังนั้นวิธีการและพารามิเตอร์สามารถพบได้ใน API!
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้