พื้นฐานของ Google Maps
สร้างแผนที่ Google อย่างง่าย
ตอนนี้เรามาสร้างแผนที่ Google อย่างง่าย
นี่คือแผนที่ Google ที่แสดงลอนดอนสหราชอาณาจักร:
ตัวอย่าง
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false" google.maps.latlng (51.508742, -0.120850), ซูม: 5, maptypeid: google.maps.maptypeid.roadmap}; var map = new google.maps.map (document.getElementById ("googlemap") เริ่มต้น); </script> </head> <body> <div id = "googlemap"> </div> </body> </html>ตัวอย่างการเรนเดอร์ (สามารถคัดลอกและเรียกใช้โดยตรงแน่นอนว่าคุณต้องสามารถเข้าถึง Google ได้)
การวิเคราะห์ตัวอย่าง
เราใช้ตัวอย่างข้างต้นเพื่อวิเคราะห์กระบวนการสร้างของ Google Maps
เหตุใดแอปพลิเคชันจึงประกาศ HTML5
<! doctype html>
เบราว์เซอร์ส่วนใหญ่ใช้หน้า "โหมดมาตรฐาน" HTML5 หน้าการแสดงผลเอกสารซึ่งหมายความว่าแอปพลิเคชันของคุณเข้ากันได้กับเบราว์เซอร์หลัก
นอกจากนี้หากไม่มีแท็ก Doctype เบราว์เซอร์จะใช้โหมด Quirks เพื่อแสดงเนื้อหาหน้าเว็บ
เคล็ดลับ: ควรสังเกตว่า CSS "โหมดสำส่อน" บางอย่างไม่สามารถใช้กับโหมดมาตรฐานได้ ในแอพพลิเคชั่นเฉพาะขนาดตามเปอร์เซ็นต์ทั้งหมดจะต้องสืบทอดจากองค์ประกอบบล็อกหลัก หากไม่มีการระบุขนาดในโมดูลพาเรนต์ค่าเริ่มต้นคือ 0 x 0 พิกเซล หากคุณต้องการใช้เปอร์เซ็นต์คุณสามารถประกาศได้ในแท็ก <style> ดังนี้:
<style type = "text/css"> html {ความสูง: 100%} body {ความสูง: 100%; margin: 0; padding: 0} #googlemap {ความสูง: 100%} </style>คำสั่งสไตล์นี้บ่งชี้ว่าโมดูลแผนที่ (GOOGLEMAP) ควรมีความสูง HTML 100%
เพิ่มคีย์ Google Maps API
Google Maps API จะต้องรวมอยู่ในแท็ก <Script> แรกในตัวอย่างต่อไปนี้:
<script src = "http://maps.googleapis.com/maps/api/js?key=your_api_key&sensor=true_or_false"> </script>
วางคีย์ API ที่สร้างโดย Google ในพารามิเตอร์คีย์ (key = your_api_key)
จำเป็นต้องใช้พารามิเตอร์เซ็นเซอร์ซึ่งระบุว่าแอปพลิเคชันใช้เซ็นเซอร์ (คล้ายกับการนำทาง GPS) เพื่อค้นหาตำแหน่งของผู้ใช้หรือไม่ ค่าพารามิเตอร์สามารถตั้งค่าเป็นจริงหรือเท็จ
https
หากแอปพลิเคชันของคุณเป็นแอปพลิเคชัน HTTP ที่ปลอดภัย (HTTPS: HTTP Secure) คุณสามารถใช้ HTTPS เพื่อโหลด Google Maps API:
<script src = "https://maps.googleapis.com/maps/api/js?key=your_api_key&sensor=true_or_false"> </script>
การโหลดแบบอะซิงโครนัส
ในทำนองเดียวกันเราสามารถโหลด Google Maps API หลังจากโหลดหน้าเว็บได้อย่างสมบูรณ์
ตัวอย่างต่อไปนี้ใช้ window.onload เพื่อให้ได้การโหลด Google Maps อย่างเต็มรูปแบบ ฟังก์ชั่น loadscript () สร้างแท็ก Google Maps API <script> นอกจากนี้พารามิเตอร์ callback = เริ่มต้นจะถูกเพิ่มที่ส่วนท้ายของแท็ก itiedize () เป็นฟังก์ชันการโทรกลับจะถูกเรียกใช้หลังจาก API โหลดเต็ม:
ตัวอย่าง
<! doctype html> <html> <head> <head> <script> ฟังก์ชั่นเริ่มต้น () {var mapprop = {center: ใหม่ google.maps.latlng (51.508742, -0.120850), Zoom: 7, MapTypeId var map = ใหม่ google.maps.map (document.getElementById ("googlemap"), mapprop);} function loadscript () {var script = document.createElement ("สคริปต์"); script.type = "text/javascript"; script.src = "http://maps.googleapis.com/maps/api/js?key=aizasydydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false&callback=initialize"; document.body.appendchild (สคริปต์);} window.onload = loadscript; </script> </head> <body> <div id = "googlemap"> </div> </body> </html>กำหนดคุณสมบัติแผนที่
ก่อนที่จะเริ่มต้นแผนที่เราจำเป็นต้องสร้างวัตถุคุณสมบัติแผนที่เพื่อกำหนดคุณสมบัติแผนที่บางอย่าง:
var mapprop = {center: ใหม่ google.maps.latlng (51.508742, -0.120850), ซูม: 7, maptypeid: google.maps.maptypeid.roadmap};จุดศูนย์กลาง (จุดกึ่งกลาง)
คุณสมบัติกลางระบุจุดศูนย์กลางของแผนที่ซึ่งสร้างจุดกึ่งกลางบนแผนที่ผ่านพิกัด (ละติจูดลองจิจูด)
ซูม (ซีรีย์ซูม)
คุณสมบัติการซูมระบุช่วงการซูมของแผนที่ ซูม: 0 แสดงการซูมเต็มรูปแบบของแผนที่โลกทั้งหมด
MapTypeId (ประเภทเริ่มต้นของแผนที่)
คุณสมบัติ MapTypeID ระบุประเภทเริ่มต้นของแผนที่
MapTypeID รวมถึงสี่ประเภทต่อไปนี้:
google.maps.maptypeid.hybrid: ชั้นโปร่งใสถนนสายหลักที่แสดงภาพดาวเทียม
google.maps.maptypeid.roadmap: แสดงแผนที่ถนนปกติ
google.maps.maptypeid.satellite: แสดงภาพดาวเทียม
google.maps.maptypeid.terrain: แสดงแผนที่ที่มีคุณสมบัติตามธรรมชาติเช่นภูมิประเทศและพืชพรรณ
สถานที่แสดง Google Maps
โดยปกติ Google แผนที่จะใช้ในองค์ประกอบ <div>:
<div id = "googlemap"> </div>
หมายเหตุ: แผนที่จะแสดงขนาดของแผนที่ด้วยขนาดที่ตั้งไว้ใน DIV ดังนั้นเราจึงสามารถตั้งค่าขนาดของแผนที่ในองค์ประกอบ <div>
สร้างวัตถุแผนที่
var map = ใหม่ google.maps.map (document.getElementById ("googlemap"), maprop);
รหัสด้านบนใช้พารามิเตอร์ (mapprop) เพื่อสร้างแผนที่ใหม่ในองค์ประกอบ <div> (id คือ googlemap)
เคล็ดลับ: หากคุณต้องการสร้างแผนที่หลายแผนที่บนหน้าคุณเพียงแค่ต้องเพิ่มวัตถุแผนที่ใหม่
ตัวอย่างต่อไปนี้กำหนดอินสแตนซ์แผนที่สี่อินสแตนซ์ (สี่แผนที่ใช้ประเภทแผนที่ที่แตกต่างกัน):
ตัวอย่าง
<html> <head> <scriptsrc = "http://maps.googleapis.com/maps/api/js?key=aizasydy0kkkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false" google.maps.latlng (51.508742, -0.120850), ซูม: 9, maptypeid: google.maps.maptypeid.roadmap}; var mapprop2 = {center: ใหม่ google.maps.latlng (51.508742, -0.120850), ซูม: 9, maptypeid: google.maps.maptypeid.satellite}; var mapprop3 = {center: ใหม่ google.maps.latlng (51.508742, -0.120850), ซูม: 9, maptypeid: google.maps.maptypeid.hybrid}; var mapprop4 = {ศูนย์: ใหม่ google.maps.latlng (51.508742, -0.120850), ซูม: 9, maptypeid: google.maps.maptypeid.terrain}; var map = ใหม่ google.maps.map (document.getElementById ("googlemap"), maprop); var map2 = ใหม่ google.maps.map (document.getElementById ("googleMap2"), maprop2); var map3 = ใหม่ google.maps.map (document.getElementById ("googleMap3"), maprop3); var map4 = ใหม่ google.maps.map (document.getElementById ("googlemap4"), mapprop4);} google.maps.event.adddomListener (หน้าต่าง, 'โหลด', เริ่มต้น); id = "googlemap3"> </div> <br> <div id = "googlemap4"> </div> </body> </html>กำลังโหลดแผนที่
หลังจากโหลดหน้าต่างแล้ววัตถุแผนที่จะเริ่มต้นโดยการดำเนินการเริ่มต้นฟังก์ชั่น () ซึ่งทำให้มั่นใจได้ว่า Google แผนที่จะถูกโหลดหลังจากโหลดหน้าเว็บอย่างสมบูรณ์:
google.maps.event.adddomlistener (หน้าต่าง, 'โหลด', เริ่มต้น);
ข้างต้นเป็นการรวบรวมข้อมูลพื้นฐานของ Google Maps เราจะเพิ่มในภายหลัง ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!