ความคิดเห็น: จานนี้เพิ่งเริ่มเรียนรู้ HTML5 และตอนนี้ค่อนข้างสนใจในตำแหน่งทางภูมิศาสตร์ ฟังก์ชั่นการวางตำแหน่งแผนที่พื้นฐานถูกนำมาใช้ร่วมกับ Google Map API ขั้นตอนต่อไปนี้ส่วนใหญ่จะใช้: รับตำแหน่งทางภูมิศาสตร์ปัจจุบันและโทรไปที่ Google Map API เพื่อรับข้อมูลตำแหน่งปัจจุบัน
จานนี้เพิ่งเริ่มเรียนรู้ HTML5 และตอนนี้ค่อนข้างสนใจในการจัดสรรทางภูมิศาสตร์และรวม API ของ Google Map เพื่อใช้ฟังก์ชั่นการวางตำแหน่งแผนที่พื้นฐาน1. รับตำแหน่งทางภูมิศาสตร์ปัจจุบัน
เรียกวิธีการโมฆะ getCurrentPosition (onsuccess, onerror, ตัวเลือก);
ในกรณีที่ OnSuccess เป็นฟังก์ชั่นการโทรกลับที่ดำเนินการเมื่อข้อมูลตำแหน่งปัจจุบันสำเร็จ ONERROR เป็นฟังก์ชั่นการโทรกลับที่ดำเนินการเมื่อข้อมูลตำแหน่งปัจจุบันล้มเหลวตัวเลือกเป็นรายการที่คุ้นเคย พารามิเตอร์ที่สองและสามเป็นแอตทริบิวต์เสริม
ในฟังก์ชั่นการโทรกลับที่ประสบความสำเร็จตำแหน่งพารามิเตอร์จะใช้เพื่อแสดงวัตถุตำแหน่งเฉพาะและแสดงตำแหน่งปัจจุบัน มันมีคุณสมบัติดังต่อไปนี้:
•ละติจูด: ละติจูดของที่ตั้งทางภูมิศาสตร์ปัจจุบัน
•ลองจิจูด: ลองจิจูดของที่ตั้งทางภูมิศาสตร์ปัจจุบัน
•ระดับความสูง: ระดับความสูงของตำแหน่งปัจจุบัน (NULL ถ้าไม่สามารถเรียกคืนได้)
•ความแม่นยำ: ความแม่นยำ (เป็นเมตร) ของละติจูดและลองจิจูดที่ได้รับ
• Altitudeaccurancy: ลองจิจูด (เป็นเมตร) ของระดับความสูงที่ได้รับ
•หัวเรื่อง: ทิศทางของอุปกรณ์ มันถูกแสดงด้วยมุมหมุนตามเข็มนาฬิกาหันหน้าไปทางทิศทางไปข้างหน้า (null ถ้าไม่สามารถเรียกคืนได้)
•ความเร็ว: ความเร็วไปข้างหน้าของอุปกรณ์ (เป็นเมตร/วินาทีจะไม่สามารถเรียกคืนได้)
•การประทับเวลา: เวลาที่คุณได้รับข้อมูลตำแหน่งทางภูมิศาสตร์
ในฟังก์ชั่นการโทรกลับ ONERROR ใช้พารามิเตอร์ข้อผิดพลาด มันมีคุณสมบัติดังต่อไปนี้:
•รหัส: รหัสข้อผิดพลาดพร้อมค่าต่อไปนี้
1. ผู้ใช้ปฏิเสธบริการตำแหน่ง (ค่าแอตทริบิวต์คือ 1);
2. ข้อมูลตำแหน่งไม่สามารถรับได้ (ค่าแอตทริบิวต์คือ 2);
3. รับข้อผิดพลาดการหมดเวลาข้อมูล (ค่าคุณสมบัติคือ 3)
•ข้อความ: สตริงที่มีข้อมูลข้อผิดพลาดเฉพาะ
ในพารามิเตอร์ตัวเลือกคุณสมบัติทางเลือกมีดังนี้:
•เปิดใช้งาน Highhighcuracy: จำเป็นต้องมีข้อมูลตำแหน่งทางภูมิศาสตร์ที่มีความแม่นยำสูงหรือไม่
•หมดเวลา: ตั้งเวลาหมดเวลา (เป็นมิลลิวินาที)
•ค่าสูงสุด: เวลาที่ถูกต้อง (เป็นมิลลิวินาที) สำหรับข้อมูลการจัดตำแหน่งแคช
โปรดทราบว่าคุณต้องเขียนรหัสต่อไปนี้เพื่อตรวจสอบว่าเบราว์เซอร์รองรับ HTML5 เพื่อรับข้อมูลที่ตั้งทางภูมิศาสตร์หรือไม่เพื่อให้เข้ากันได้กับเบราว์เซอร์ที่ไม่ได้รับการสนับสนุนก่อนหน้านี้
if (navigator.geolocation) {
// รับข้อมูลตำแหน่งทางภูมิศาสตร์ปัจจุบัน
Navigator.geolocation.getCurrentPosition (onsuccess, onerror, ตัวเลือก);
} อื่น {
การแจ้งเตือน ("เบราว์เซอร์ของคุณไม่สนับสนุน HTML5 เพื่อรับข้อมูลตำแหน่งทางภูมิศาสตร์");
-
2. โทรหา Google MAP API เพื่อรับข้อมูลตำแหน่งปัจจุบัน
ก่อนอื่นคุณต้องอ้างอิงไฟล์สคริปต์ของ Google Map API ในหน้า วิธีการนำเข้ามีดังนี้
<script type = "text/javascript" src = "http://maps.google.com/maps/api/js?sensor=false"> </script>
ประการที่สองตั้งค่าพารามิเตอร์แผนที่และวิธีการตั้งค่ามีดังนี้
// ระบุจุดพิกัดบนแผนที่ Google และระบุพิกัดแนวนอนและแนวตั้งของจุดพิกัด
var latlng = ใหม่ google.maps.latlng (coords.latitude, coords.longitude);
var myoptions = {
ซูม: 14, // ตั้งค่าการขยาย
ศูนย์: latlng, // ตั้งค่าจุดกึ่งกลางของแผนที่เป็นจุดพิกัดที่ระบุ
MapTypeId: google.maps.maptypeid.roadmap // ระบุประเภทแผนที่
-
สุดท้ายสร้างแผนที่และแสดงในหน้าวิธีการสร้างมีดังนี้
// สร้างแผนที่และแสดงในแผนที่หน้า
var map = ใหม่ google.maps.map (document.getElementById ("แผนที่"), myoptions);
ในตอนท้ายรหัสทั้งหมดสำหรับตัวอย่างนี้จะถูกนำเสนอ รหัสจะแสดงด้านล่าง
<! doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> รับตำแหน่งปัจจุบันและแสดงบน Google Maps </title>
<script type = "text/javascript" src = "http://maps.google.com/maps/api/js?sensor=false"> </script>
<script type = "text/javascript">
ฟังก์ชัน init () {
if (navigator.geolocation) {
// รับตำแหน่งทางภูมิศาสตร์ปัจจุบัน
navigator.geolocation.getCurrentPosition (ฟังก์ชั่น (ตำแหน่ง) {
var coords = position.coords;
//console.log(position);
// ระบุจุดพิกัดบนแผนที่ Google และระบุพิกัดแนวนอนและแนวตั้งของจุดพิกัด
var latlng = ใหม่ google.maps.latlng (coords.latitude, coords.longitude);
var myoptions = {
ซูม: 14, // ตั้งค่าการขยาย
ศูนย์: latlng, // ตั้งค่าจุดกึ่งกลางของแผนที่เป็นจุดพิกัดที่ระบุ
MapTypeId: google.maps.maptypeid.roadmap // ระบุประเภทแผนที่
-
// สร้างแผนที่และแสดงในแผนที่หน้า
var map = ใหม่ google.maps.map (document.getElementById ("แผนที่"), myoptions);
// สร้างเครื่องหมายบนแผนที่
var marker = ใหม่ google.maps.marker ({
ตำแหน่ง: latlng, // คลิกออกพิกัดที่ตั้งไว้ด้านบน
แผนที่: แผนที่ // ตั้งค่าคำอธิบายประกอบนี้ในแผนที่ที่คุณเพิ่งสร้างขึ้น
-
// หน้าต่างพรอมต์แท็ก
var infowIndow = ใหม่ google.maps.infowindow ({
เนื้อหา: "ตำแหน่งปัจจุบัน: <br/> ยาว:" + latlng.lat () + "<br/> มิติ:" + latlng.lng () // ข้อความแจ้งในแบบฟอร์มพรอมต์
-
// เปิดหน้าต่างพรอมต์
infowindow.open (แผนที่, เครื่องหมาย);
-
ฟังก์ชั่น (ข้อผิดพลาด) {
// ข้อผิดพลาดในการประมวลผล
switch (error.code) {
กรณีที่ 1:
การแจ้งเตือน ("บริการตำแหน่งปฏิเสธ");
หยุดพัก;
กรณีที่ 2:
การแจ้งเตือน ("ข้อมูลตำแหน่งไม่สามารถรับได้ตลอดเวลา");
หยุดพัก;
กรณีที่ 3:
การแจ้งเตือน ("รับข้อมูลหมดเวลา");
หยุดพัก;
ค่าเริ่มต้น:
การแจ้งเตือน ("ข้อผิดพลาดที่ไม่รู้จัก");
หยุดพัก;
-
-
} อื่น {
การแจ้งเตือน ("เบราว์เซอร์ของคุณไม่สนับสนุน HTML5 เพื่อรับข้อมูลตำแหน่งทางภูมิศาสตร์");
-
-
</script>
</head>
<body>
<div> </div>
</body>
</html>