บทช่วยสอน ฐาน Google Maps ที่ดีที่สุดในปี 2024 ในบทช่วยสอนนี้ คุณสามารถเรียนรู้ สร้างง่าย Google Maps,ตัวอย่าง,ตัวอย่างของการวิเคราะห์,ทำไมควรประกาศ HTML5 ใบสมัคร,เพิ่ม Google Maps API Key,ตัวอย่าง,แผนที่ที่กำหนดเองคุณสมบัติ,สถานที่ที่จะแสดงใน Google Maps,สร้างวัตถุแผนที่,ตัวอย่าง,กำลังโหลดแผนที่,
ตอนนี้ขอสร้างง่าย Google Maps
ต่อไปนี้เป็นกราฟที่แสดง Google แผนที่ลอนดอน:
ในตัวอย่างข้างต้นเราจะสร้างกระบวนการในการแก้ไขแผนที่ของ Google
เบราว์เซอร์ส่วนใหญ่ใช้ "รูปแบบมาตรฐาน" ของ HTML5 การแสดงผลหน้าเอกสารซึ่งหมายความว่าโปรแกรมที่คุณสามารถทำงานร่วมกับเบราว์เซอร์ที่สำคัญทั้งหมด
นอกจากนี้หากมีแท็ก DOCTYPE ไม่มีเบราว์เซอร์ที่คุณใช้โหมดสำส่อน (โหมดมาตรฐาน) สำหรับการแสดงผลเนื้อหาของหน้าเว็บ
เคล็ดลับ: มันควรจะตั้งข้อสังเกตว่าบางโหมด "สำส่อน" ใน CSS และคุณไม่สามารถใช้โหมดมาตรฐานในการประยุกต์ใช้โดยเฉพาะอย่างยิ่งทุกคนต้องรับมรดกจากองค์ประกอบของบล็อกปกครองตามสัดส่วนของขนาดที่ หากคุณไม่ได้ระบุขนาดของโมดูลในผู้ปกครองค่าเริ่มต้น 0 0 x พิกเซล หากคุณต้องการที่จะใช้ร้อยละสามารถประกาศใน <style> แท็กดังต่อไปนี้:
แผนที่นี้แสดงโมดูลประกาศสไตล์ (GoogleMap) ควรจะมีความสูง HTML ของ 100%
ในตัวอย่างต่อไปนี้ครั้งแรก <script> แท็กต้องรวมอยู่ใน Google Maps API:
คีย์ API ของ Googleสร้างวางไว้ในตัวแปรสำคัญ(key= YOUR_API_KEY)
พารามิเตอร์เซ็นเซอร์จะต้องมีใช้พารามิเตอร์เพื่อบ่งชี้ว่าโปรแกรมประยุกต์ที่ใช้เซ็นเซอร์ (คล้ายกับระบบนำทาง GPS) เพื่อหาตำแหน่งของผู้ใช้ค่าพารามิเตอร์สามารถตั้งค่าให้จริงหรือเท็จ
HTTPS
หากใบสมัครของคุณจะมีความปลอดภัย http: แอพลิเคชัน (HTTPS HTTP ที่ปลอดภัย), คุณสามารถใช้ HTTPS โหลด Google Maps API:
โหลดไม่ตรงกัน
ในทำนองเดียวกันเรายังสามารถโหลด Google Maps API หลังหน้ามีแปล้
ตัวอย่างต่อไปนี้จะใช้ในการดำเนินการ window.onload แปล้เมื่อโหลดหน้าเว็บ Google Maps loadScript () ฟังก์ชันสร้างโหลด Google Maps API <script> แท็ก นอกจากนี้ในตอนท้ายของฉลากเพื่อโทรกลับที่เริ่มต้น = พารามิเตอร์เริ่มต้น () จะดำเนินการหลังจาก API ที่มีการโหลดอย่างเป็นฟังก์ชันการเรียกกลับ:
ก่อนที่จะเริ่มต้นแผนที่เราต้องสร้างวัตถุแผนที่เพื่อกำหนดคุณสมบัติแผนที่ทรัพย์สิน:
ศูนย์ (กลาง)
แอตทริบิวต์ศูนย์ระบุ Center แผนที่ซึ่งโดยพิกัด (เส้นรุ้งเส้นแวง) เพื่อสร้างจุดกลางบนแผนที่
ซูม (Zoom Series)
สถานที่ให้บริการแผนที่ซูมซูมระบุจำนวนของขั้นตอน ซูม: 0 แสดงเต็มรูปแบบแผนที่ทั้งหมดของโลก
MapTypeId (แผนที่ชนิดเริ่มต้น)
ประเภทแอตทริบิวต์ MapTypeId ระบุแผนที่เริ่มต้น
MapTypeId รวมถึงต่อไปสี่ประเภท:
โดยทั่วไปจะใช้ใน Google แผนที่ <div>:
หมายเหตุ: ขนาดของแผนที่จะ DIV ตั้งค่าให้แสดงขนาดของแผนที่เพื่อให้เราสามารถกำหนดขนาดของแผนที่ใน <div> องค์ประกอบ
รหัสข้างต้นใช้พารามิเตอร์ (mapProp) ใน <div> (ID เป็น GoogleMap) สร้างแผนที่ใหม่
เคล็ดลับ: หากคุณต้องการที่จะสร้างหน้าแผนที่หลายท่านจะต้องเพิ่มวัตถุแผนที่ใหม่สามารถ
ตัวอย่างต่อไปนี้กำหนดสี่แผนที่อินสแตนซ์ (แผนที่โดยใช้แผนที่สี่ประเภทที่แตกต่างกัน):
หน้าต่างแผนที่เพื่อเริ่มต้นวัตถุหลังจากที่โหลดโดยการดำเนินการเริ่มต้น () ฟังก์ชันซึ่งทำให้มั่นใจได้ว่าหน้ามีการโหลดอย่างเต็มที่ก่อนที่จะโหลด Google แผนที่: