ฐาน Google Maps
สร้างง่าย Google Maps
ตอนนี้ขอสร้างง่าย Google Maps
ต่อไปนี้เป็นกราฟที่แสดง Google แผนที่ลอนดอน:
ตัวอย่าง
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap")
,mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
ลอง»
ตัวอย่างของการวิเคราะห์
ในตัวอย่างข้างต้นเราจะสร้างกระบวนการในการแก้ไขแผนที่ของ Google
ทำไมควรประกาศ HTML5 ใบสมัคร
เบราว์เซอร์ส่วนใหญ่ใช้ "รูปแบบมาตรฐาน" ของ HTML5 การแสดงผลหน้าเอกสารซึ่งหมายความว่าโปรแกรมที่คุณสามารถทำงานร่วมกับเบราว์เซอร์ที่สำคัญทั้งหมด
นอกจากนี้หากมีแท็ก DOCTYPE ไม่มีเบราว์เซอร์ที่คุณใช้โหมดสำส่อน (โหมดมาตรฐาน) สำหรับการแสดงผลเนื้อหาของหน้าเว็บ
เคล็ดลับ: มันควรจะตั้งข้อสังเกตว่าบางโหมด "สำส่อน" ใน CSS และคุณไม่สามารถใช้โหมดมาตรฐานในการประยุกต์ใช้โดยเฉพาะอย่างยิ่งทุกคนต้องรับมรดกจากองค์ประกอบของบล็อกปกครองตามสัดส่วนของขนาดที่ หากคุณไม่ได้ระบุขนาดของโมดูลในผู้ปกครองค่าเริ่มต้น 0 0 x พิกเซล หากคุณต้องการที่จะใช้ร้อยละสามารถประกาศใน <style> แท็กดังต่อไปนี้:
html {height:100%}
body {height:100%;margin:0;padding:0}
#googleMap {height:100%}
</style>
แผนที่นี้แสดงโมดูลประกาศสไตล์ (GoogleMap) ควรจะมีความสูง HTML ของ 100%
เพิ่ม Google Maps API Key
ในตัวอย่างต่อไปนี้ครั้งแรก <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 ที่มีการโหลดอย่างเป็นฟังก์ชันการเรียกกลับ:
ตัวอย่าง
{
var script = document.createElement("script");
script.src = "http://maps.googleapis.com/maps/api/js? key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&callback=initialize"; document.body.appendChild(script);
}
window.onload = loadScript;
ลอง»
แผนที่ที่กำหนดเองคุณสมบัติ
ก่อนที่จะเริ่มต้นแผนที่เราต้องสร้างวัตถุแผนที่เพื่อกำหนดคุณสมบัติแผนที่ทรัพย์สิน:
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
ศูนย์ (กลาง)
แอตทริบิวต์ศูนย์ระบุ Center แผนที่ซึ่งโดยพิกัด (เส้นรุ้งเส้นแวง) เพื่อสร้างจุดกลางบนแผนที่
ซูม (Zoom Series)
สถานที่ให้บริการแผนที่ซูมซูมระบุจำนวนของขั้นตอน ซูม: 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 ตั้งค่าให้แสดงขนาดของแผนที่เพื่อให้เราสามารถกำหนดขนาดของแผนที่ใน <div> องค์ประกอบ
สร้างวัตถุแผนที่
,mapProp);
รหัสข้างต้นใช้พารามิเตอร์ (mapProp) ใน <div> (ID เป็น GoogleMap) สร้างแผนที่ใหม่
เคล็ดลับ: หากคุณต้องการที่จะสร้างหน้าแผนที่หลายท่านจะต้องเพิ่มวัตถุแผนที่ใหม่สามารถ
ตัวอย่างต่อไปนี้กำหนดสี่แผนที่อินสแตนซ์ (แผนที่โดยใช้แผนที่สี่ประเภทที่แตกต่างกัน):
ตัวอย่าง
var map2 = new google.maps.Map(document.getElementById("googleMap2"),mapProp2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"),mapProp3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"),mapProp4);
ลอง»
กำลังโหลดแผนที่
หน้าต่างแผนที่เพื่อเริ่มต้นวัตถุหลังจากที่โหลดโดยการดำเนินการเริ่มต้น () ฟังก์ชันซึ่งทำให้มั่นใจได้ว่าหน้ามีการโหลดอย่างเต็มที่ก่อนที่จะโหลด Google แผนที่: