1. ก่อนเริ่มต้น
Codelab นี้มีไว้เพื่อช่วยให้คุณเข้าใจวิธีสร้างแผนที่ 3 มิติแผนที่แรกโดยใช้แผนที่ 3 มิติที่เหมือนภาพถ่ายจริงใน Maps JavaScript คุณจะได้เรียนรู้พื้นฐานเกี่ยวกับการโหลดคอมโพเนนต์ที่เหมาะสมของ Maps JavaScript API, การแสดงแผนที่ 3 มิติใบแรก และวาดฟีเจอร์บนแผนที่
สิ่งที่คุณจะสร้าง
ในโค้ดแล็บนี้ คุณจะได้สร้างเว็บแอป 3 มิติที่ทําสิ่งต่อไปนี้
- โหลด Maps JavaScript API แบบไดนามิก
- แสดงแผนที่ 3 มิติที่ศูนย์กลางคือ CN Tower ในโตรอนโต
- แสดงขอบเขตรอบสถานที่ตั้ง
- ปิดจุดที่น่าสนใจในแผนที่ 3 มิติ
- ขยายขอบเขตให้ครอบคลุมสถานที่ตั้ง
สิ่งที่คุณจะได้เรียนรู้
- การเริ่มต้นใช้งาน Google Maps Platform
- การโหลด Maps JavaScript API แบบไดนามิกจากโค้ด JavaScript โดยใช้การนําเข้าไลบรารีแบบไดนามิก
- โหลดแผนที่ 3 มิติโดยใช้คลาส Map3DElement
- การใช้รูปหลายเหลี่ยมและการยื่นออกมาเพื่อวาดบนแผนที่
2. ข้อกำหนดเบื้องต้น
คุณจะต้องทำความคุ้นเคยกับรายการต่างๆ ที่นี่เพื่อทํา Codelab นี้ให้เสร็จสมบูรณ์ หากคุ้นเคยกับการใช้งาน Google Maps Platform อยู่แล้ว ให้ข้ามไปดู Codelab
ผลิตภัณฑ์ Google Maps Platform ที่จําเป็น
ใน Codelab นี้ คุณจะใช้ผลิตภัณฑ์ Google Maps Platform ต่อไปนี้
- Maps JavaScript API
ใช่ เพียงเท่านี้คุณก็เพิ่มแผนที่ 3 มิติลงในหน้าเว็บได้แล้ว ง่ายนิดเดียว
ข้อกำหนดอื่นๆ สำหรับ Codelab นี้
คุณต้องมีบัญชี บริการ และเครื่องมือต่อไปนี้จึงจะทำ Codelab นี้ให้เสร็จสมบูรณ์ได้
- บัญชี Google Cloud ที่เปิดใช้การเรียกเก็บเงิน
- คีย์ API ของ Google Maps Platform ที่เปิดใช้ Maps JavaScript API
- ความรู้พื้นฐานเกี่ยวกับ JavaScript, HTML และ CSS
- เครื่องมือแก้ไขข้อความหรือ IDE ที่คุณเลือกเพื่อบันทึกไฟล์ที่แก้ไขเพื่อดู
- เว็บเบราว์เซอร์สำหรับดูไฟล์ขณะทำงาน
3. ตั้งค่า
ตั้งค่า Google Maps Platform
หากยังไม่มีบัญชี Google Cloud Platform และโปรเจ็กต์ที่เปิดใช้การเรียกเก็บเงิน โปรดดูคู่มือเริ่มต้นใช้งาน Google Maps Platform เพื่อสร้างบัญชีการเรียกเก็บเงินและโปรเจ็กต์
- ใน Cloud Console ให้คลิกเมนูแบบเลื่อนลงของโปรเจ็กต์ แล้วเลือกโปรเจ็กต์ที่ต้องการใช้สำหรับโค้ดแล็บนี้
- เปิดใช้ Google Maps Platform API และ SDK ที่จําเป็นสําหรับโค้ดแล็บนี้ใน Google Cloud Marketplace โดยทำตามขั้นตอนในวิดีโอนี้หรือเอกสารประกอบนี้
- สร้างคีย์ API ในหน้าข้อมูลเข้าสู่ระบบของ Cloud Console คุณสามารถทำตามขั้นตอนในวิดีโอนี้หรือเอกสารประกอบนี้ คำขอทั้งหมดที่ส่งไปยัง Google Maps Platform ต้องใช้คีย์ API
4. โหลด Maps JavaScript API
เมื่อทำตามขั้นตอนทั้งหมดในส่วนการตั้งค่าแล้ว คุณก็พร้อมที่จะเริ่มสร้างแผนที่ 3 มิติแรก
สร้างหน้าเว็บที่ง่ายที่สุดเท่าที่คุณจะจินตนาการได้
ก่อนอื่นเราจะสร้างหน้าเว็บพื้นฐานมากๆ เพื่อโฮสต์โค้ดทั้งหมด ซึ่งทำได้ในเครื่องมือแก้ไขหรือแพลตฟอร์มใดก็ได้
<!DOCTYPE html>
<html>
<head>
<title>3D Maps Codelab</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
</body>
</html>
เพิ่มโค้ดและบันทึกไฟล์ไว้ในตำแหน่งที่เข้าถึงได้โดยใช้ชื่อ เช่น 3dmap.html จากนั้นเปิดไฟล์นี้ในเว็บเบราว์เซอร์เพื่อดูสถานะปัจจุบันของหน้าเว็บและดูว่าคุณมีข้อผิดพลาดหรือไม่
เช่นเดียวกับแผนที่ 2 มิติ รากฐานของแผนที่ 3 มิติคือ Maps JavaScript API คุณจึงต้องโหลด API ดังกล่าวก่อน
ซึ่งทำได้หลายวิธี โดยดูได้ที่ส่วนโหลด Maps JavaScript API ในเอกสารประกอบ
ในการสาธิตนี้ เราจะใช้วิธีการนําเข้าคลังแบบไดนามิกที่ทันสมัยกว่า เนื่องจากวิธีนี้ช่วยให้คุณควบคุมเฉพาะองค์ประกอบที่ต้องโหลด ซึ่งจะช่วยลดขนาดการดาวน์โหลดและเวลาเริ่มต้น
เพิ่มโปรแกรมโหลดแบบไดนามิก
หากต้องการใช้ตัวโหลดแบบไดนามิก ให้เพิ่มแท็กสคริปต์ต่อไปนี้ลงในหน้าเว็บ โดยเพิ่มคีย์ API ของคุณเองในตำแหน่งที่เหมาะสม (ซึ่งได้รับในขั้นตอนที่ 2) วางแท็กสคริปต์นี้ไว้ระหว่างส่วนเนื้อหาของหน้าเว็บพื้นฐาน
<script async defer>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "YOUR_API_KEY",
v: "alpha",
});
</script>
โปรดทราบว่าในระยะแรกของการเปิดตัวผลิตภัณฑ์นี้ เรากำลังใช้ alpha branch ของ API เพื่อเข้าถึงแผนที่ 3 มิติ เวอร์ชันนี้มีฟีเจอร์เวอร์ชันทดลองมากที่สุดของผลิตภัณฑ์และให้คุณทดสอบโค้ดทดลองใช้ก่อนเปิดตัวขณะที่อยู่ระหว่างการพัฒนาเพื่อให้คุณพร้อมใช้งานเมื่อถึงเวลาเปิดตัว
ตอนนี้คุณควรมีหน้าเว็บพื้นฐานที่มีตัวโหลดแบบไดนามิก (หากเปิดหน้าเว็บ มุมมองจะว่างเปล่า แต่ไม่ควรมีข้อผิดพลาด) ตอนนี้เราพร้อมที่จะเพิ่มแผนที่ 3 มิติแล้ว
หากรหัสใช้งานไม่ได้ด้วยเหตุผลใดก็ตาม ให้ไปที่ขั้นตอนที่ 6 แล้วเปรียบเทียบกับผลลัพธ์สุดท้ายเพื่อดูว่าเกิดข้อผิดพลาดใดขึ้น
หากต้องการดูสาเหตุที่หน้าเว็บอาจไม่ทํางาน ให้ดูที่คอนโซลข้อผิดพลาดในเบราว์เซอร์เพื่อแก้ไขข้อบกพร่อง หน้าข้อผิดพลาดจะแสดงวิธีการดำเนินการนี้สำหรับเบราว์เซอร์ต่างๆ รวมถึงอธิบายข้อความแสดงข้อผิดพลาดต่างๆ และสาเหตุที่พบได้ทั่วไปที่ทําให้ API อาจไม่ทํางาน นี่เป็นทรัพยากรที่มีประโยชน์ซึ่งควรใช้ตลอดการพัฒนาเพื่อหาสิ่งที่อาจไม่ถูกต้องเกี่ยวกับการติดตั้งใช้งาน
5. แสดงแผนที่
ตอนนี้เราพร้อมที่จะเพิ่มแผนที่ 3 มิติแรกลงในหน้าเว็บแล้ว
แผนที่ 3 มิติสร้างขึ้นโดยใช้คลาส google.maps.maps3d.Map3DElement ซึ่งช่วยให้เราสร้างและทํางานกับอินสแตนซ์แผนที่ 3 มิติได้ ในโค้ดแล็บนี้ เราจะทํางานกับออบเจ็กต์แผนที่ 3 มิติโดยตรงแทนที่จะทําผ่านแท็ก HTML
สร้างฟังก์ชัน Init และโหลดไลบรารี
ก่อนอื่นเราจะสร้างฟังก์ชันที่โหลดองค์ประกอบลงในหน้าเว็บ ดูโค้ด อันดับแรกเราสร้างฟังก์ชันแบบอะซิงโครนัส ซึ่งช่วยให้เราตรวจสอบได้ว่าโหลดองค์ประกอบทั้งหมดแล้วก่อนที่จะดําเนินการกับโค้ดที่เหลือ จากนั้นเราจะเรียกใช้ฟังก์ชัน init เมื่อหน้าเว็บโหลด
เพิ่มบรรทัดนี้ไว้หลังสคริปต์การโหลดภายในส่วนเนื้อหาของหน้า
<script>
async function init() {
const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
}
init();
</script>
โปรดทราบว่าเราใช้นิพจน์ await เพื่อให้แน่ใจว่าระบบโหลดคลังแล้วก่อนที่จะดําเนินการต่อ
สร้างองค์ประกอบแผนที่ 3 มิติและระบุตำแหน่ง
ถัดไปเราต้องระบุตำแหน่งที่ต้องการให้แสดงมุมมองแผนที่ สำหรับแผนที่ 3 มิติ คุณใช้พารามิเตอร์ต่างๆ ในการตั้งค่ามุมมองได้ ซึ่งหมายถึงพารามิเตอร์ของกล้องเสมือนจริงที่อธิบายสิ่งที่คุณกําลังมองในฉาก
เรามาสร้างวิวหอคอย CN Tower ที่มีลักษณะคล้ายกับภาพนี้กัน
ก่อนอื่น เราต้องระบุพิกัดที่ต้องการดู ซึ่งประกอบด้วยมุมมอง 2 แบบ
- จุดที่เราต้องการดู รวมถึงระดับความสูง
- ระยะทางและทิศทางของกล้องเสมือนจริงที่กําลังมองจุดนั้น
เมื่อดูรูปภาพต่อไปนี้ คุณจะเห็นภาพคร่าวๆ ว่าการตั้งค่าเหล่านี้ทำงานอย่างไร
ศูนย์กลางขององค์ประกอบคือจุดที่คุณกําลังมองอยู่ ส่วนระยะทางคือระยะห่างระหว่างคุณกับวัตถุ และการเอียงคือมุมที่คุณกําลังดูรูปภาพ คุณยังตั้งค่าส่วนหัวและการหมุนของออบเจ็กต์ได้หากต้องการควบคุมส่วนหัวและการหมุนด้วย แต่เราจะไม่ใช้ส่วนนี้
ตอนนี้เราจะไปสร้างแผนที่ 3 มิติในหน้าเว็บ โดยเพิ่มโค้ดต่อไปนี้ลงในหน้าในส่วน init หลังจากนําเข้าไลบรารีแล้ว
const map3DElement = new Map3DElement({
center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
range: 1000,
tilt: 60,
mode: MapMode.HYBRID,
});
document.body.append(map3DElement);
ก่อนอื่นให้สร้างองค์ประกอบและตั้งค่าพารามิเตอร์ตำแหน่งที่เหมาะสม จากนั้นเพิ่มคอมโพเนนต์ในหน้าเว็บ (เรากําหนดค่าให้กับ div ที่มีอยู่ได้หากต้องการ)
ตอนนี้โค้ดของคุณควรมีลักษณะดังตัวอย่างต่อไปนี้
<!DOCTYPE html>
<html>
<head>
<title>3D Maps Codelab</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script async defer>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "YOUR_API_KEY",
v: "alpha",
});
</script>
<script>
async function init() {
const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
const map3DElement = new Map3DElement({
center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
range: 1000,
tilt: 60,
mode: MapMode.HYBRID
});
document.body.append(map3DElement);
}
init();
</script>
</body>
</html>
ตอนนี้เราบันทึกไฟล์และเปิดหน้าในเบราว์เซอร์เพื่อดูว่าใช้งานได้แล้ว เราควรเห็นกล้องมองลงไปยังหอคอยดังที่แสดงในภาพ ลองเล่นไปก่อนแล้วค่อยเพิ่มกล่องบนหอคอย
6. เพิ่มและยื่นฟีเจอร์
ตอนนี้เรามีแผนที่ 3 มิติแล้ว มาเริ่มไฮไลต์วัตถุให้ผู้ใช้ทราบว่าเป็นสิ่งที่น่าสนใจกัน ในกรณีนี้ เราจะใช้รูปหลายเหลี่ยมและฟังก์ชันการยื่นออกมาเพื่อสร้างกล่องรอบๆ หอ CN เพื่อให้ดูเหมือนมุมมองต่อไปนี้
ซ่อนสิ่งที่ไม่จำเป็น
สิ่งแรกที่คุณอาจสังเกตเห็นคือเราได้ปิดจุดที่น่าสนใจ ในแผนที่นี้ เราต้องการให้หอคอยเป็นจุดสนใจ จึงต้องนำองค์ประกอบภาพอื่นๆ ออก
ในการดําเนินการนี้ เราต้องเพิ่มการเปลี่ยนแปลงโค้ดเพื่อซ่อนป้ายกํากับ อัปเดตเส้นโหมดของแผนที่เป็น "ภาพถ่ายดาวเทียม" เพื่อซ่อนจุด
mode: MapMode.SATELLITE,
การตั้งค่าพร็อพเพอร์ตี้นี้จะปิดใช้ป้ายกำกับบนแผนที่ ซึ่งรวมถึงจุดที่น่าสนใจ ถนน และเส้นขอบ และสร้างมุมมอง "สะอาด" ของสถานที่
เพิ่มและจัดรูปแบบรูปหลายเหลี่ยม
ขั้นตอนถัดไปคือการเพิ่มรูปหลายเหลี่ยมลงในหน้า ซึ่งทำได้ 2 ขั้นตอน ก่อนอื่นเราต้องโหลดฟังก์ชันที่มีข้อมูลที่จำเป็น และขั้นตอนถัดไปคือระบุรายละเอียดการจัดรูปแบบเกี่ยวกับรูปหลายเหลี่ยม เช่น สีของรูปหลายเหลี่ยมหรือจะแสดงรูปหลายเหลี่ยมอยู่หลังองค์ประกอบอื่นๆ หรือไม่
ก่อนอื่นเราจะเพิ่มคลาสที่จําเป็นลงในหน้าเว็บโดยใช้บรรทัดโค้ดต่อไปนี้
const { Polygon3DElement, AltitudeMode } = await google.maps.importLibrary("maps3d");
ซึ่งจะโหลดคลาส Polygon3DElement และ AltitudeMode ลงในหน้าเว็บ ซึ่งจําเป็นสําหรับเพิ่มออบเจ็กต์รูปหลายเหลี่ยมลงในมุมมอง
รูปหลายเหลี่ยมมีการตั้งค่าต่างๆ มากมายที่ควบคุมมุมมองได้ ตั้งแต่ความกว้างของเส้น เส้นสี (ตามชื่อหรือค่าฐาน 16) และความทึบของการตั้งค่าขอบเขตและการเติม เพื่อควบคุมว่าจะแสดงรูปหลายเหลี่ยมหลังองค์ประกอบหรืออาคารอื่นๆ หรือไม่ เช่น การวาดส่วนที่บดบัง ดูรายละเอียดเพิ่มเติมได้ในเอกสารประกอบของคลาส Polygon3DElement
ฟีเจอร์อีกอย่างที่เราจำเป็นต้องตั้งค่าคือเพื่อให้วาดรูปหลายเหลี่ยมในลักษณะที่ยื่นออกมา ซึ่งหมายความว่าให้วาดรูปหลายเหลี่ยมที่ระดับความสูงที่กำหนดไว้ แล้วขยายรูปหลายเหลี่ยมนั้นลงไปจนถึงพื้น ซึ่งทำให้รูปหลายเหลี่ยมมีความสูงเหมือนกล่อง (ดังที่เห็นในรูปภาพด้านบน) ซึ่งยังกำหนดให้เราตั้งค่าโหมดระดับความสูงในรูปหลายเหลี่ยมด้วย เราจึงต้องโหลดค่าคงที่ AltitudeMode ด้านบน หากต้องการยื่นรูปหลายเหลี่ยม คุณต้องตั้งค่าเป็น ABSOLUTE หรือ RELATIVE_TO_GROUND เพื่อให้ได้ตำแหน่งที่ถูกต้องจากระดับความสูงที่จุดยอดของรูปหลายเหลี่ยม
โค้ดจะสร้างออบเจ็กต์ตัวอักษรที่มีพร็อพเพอร์ตี้เหล่านี้ ซึ่งจะใช้สร้างออบเจ็กต์ Polygon3DElement ดังที่แสดงได้
const polygonOptions = {
strokeColor: "#EA433580",
strokeWidth: 4,
fillColor: "#0000FF80",
altitudeMode: "ABSOLUTE",
extruded: true,
drawsOccludedSegments: true,
}
const towerPolygon = new google.maps.maps3d.Polygon3DElement(polygonOptions);
ตอนนี้เราได้สร้างออบเจ็กต์รูปหลายเหลี่ยมแล้ว และจะต้องตั้งค่าพิกัดทางภูมิศาสตร์ด้วย รูปหลายเหลี่ยมมีทั้งพิกัดด้านในและด้านนอก โดยขึ้นอยู่กับวิธีแสดง innerCoordinates จะระบุรูปแบบของส่วนที่ตัดออกภายในรูปหลายเหลี่ยม และ outerCoordinates จะกำหนดขอบเขตด้านนอกของรูปหลายเหลี่ยม เนื่องจากเป็นรูปหลายเหลี่ยม ไม่ใช่เส้น พิกัดจึงต้องเริ่มต้นและสิ้นสุดที่จุดเดียวกันเพื่อให้เป็นรูปที่สมบูรณ์
คุณสามารถระบุพิกัดโดยใช้อาร์เรย์ของออบเจ็กต์หรือลิเทอรัล LatLng หรือ LatLngAltitude และเราจะเห็นสิ่งนี้สำหรับรูปหลายเหลี่ยมพื้นฐาน
towerPolygon.outerCoordinates = [
{ lat: 43.6427196, lng: -79.3876802, altitude: 600 },
{ lat: 43.6421742, lng: -79.3869184, altitude: 600 },
{ lat: 43.643001, lng: -79.3866475, altitude: 600 },
{ lat: 43.6427196, lng: -79.3876802, altitude: 600 }
];
ตอนนี้เราได้ตั้งค่าการจัดรูปแบบและพิกัดของรูปหลายเหลี่ยมแล้ว เราจึงพร้อมที่จะเพิ่มรูปหลายเหลี่ยมลงในหน้าเว็บ รูปหลายเหลี่ยมเป็นองค์ประกอบย่อยขององค์ประกอบแผนที่และต้องเพิ่มลงในออบเจ็กต์แผนที่ที่มีอยู่ในหน้า เพิ่มโค้ดต่อไปนี้ลงในหน้า
map3DElement.append(towerPolygon);
เมื่อได้รับแล้ว เราควรมีการติดตั้งใช้งานอย่างเต็มรูปแบบดังที่แสดงที่นี่ (ยกเว้นจะมีคีย์ API ของคุณเอง) เราพร้อมที่จะเรียกใช้หน้าเว็บและดูผลลัพธ์
<!DOCTYPE html>
<html>
<head>
<title>3D Maps Codelab</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<script async defer>
(g => { var h, a, k, p = "The Google Maps JavaScript API", c = "google", l = "importLibrary", q = "__ib__", m = document, b = window; b = b[c] || (b[c] = {}); var d = b.maps || (b.maps = {}), r = new Set, e = new URLSearchParams, u = () => h || (h = new Promise(async (f, n) => { await (a = m.createElement("script")); e.set("libraries", [...r] + ""); for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]); e.set("callback", c + ".maps." + q); a.src = `https://maps.${c}apis.com/maps/api/js?` + e; d[q] = f; a.onerror = () => h = n(Error(p + " could not load.")); a.nonce = m.querySelector("script[nonce]")?.nonce || ""; m.head.append(a) })); d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n)) })({
key: "YOUR_API_KEY",
v: "alpha",
});
</script>
<script>
async function init() {
const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
const map3DElement = new Map3DElement({
center: { lat: 43.6425, lng: -79.3871, altitude: 400 },
range: 1000,
tilt: 60,
mode: MapMode.SATELLITE,
});
const { Polygon3DElement, AltitudeMode } = await google.maps.importLibrary("maps3d");
const polygonOptions = {
strokeColor: "#EA433580",
strokeWidth: 4,
fillColor: "#0000FF80",
fillOpacity: 0.2,
altitudeMode: "ABSOLUTE",
extruded: true,
drawsOccludedSegments: true,
}
const towerPolygon = new google.maps.maps3d.Polygon3DElement(polygonOptions);
towerPolygon.outerCoordinates = [
{ lat: 43.6427196, lng: -79.3876802, altitude: 600 },
{ lat: 43.6421742, lng: -79.3869184, altitude: 600 },
{ lat: 43.643001, lng: -79.3866475, altitude: 600 },
{ lat: 43.6427196, lng: -79.3876802, altitude: 600 }
];
map3DElement.append(towerPolygon);
document.body.append(map3DElement);
}
init();
</script>
</body>
</html>
หากโค้ดถูกต้อง คุณควรเห็นหน้าเว็บที่มีแผนที่ 3 มิติและรูปหลายเหลี่ยมดังต่อไปนี้
คุณสร้างแผนที่ 3 มิติแผนที่แรกโดยใช้ Google Maps Platform เรียบร้อยแล้ว ซึ่งรวมถึงการโหลด Maps JavaScript API, การสร้างแผนที่ 3 มิติ และการเพิ่มรูปหลายเหลี่ยมที่ยื่นออกมา
7. ขั้นตอนถัดไปคือ
ใน Codelab นี้ คุณได้เรียนรู้ข้อมูลเบื้องต้นเกี่ยวกับสิ่งที่คุณทําได้ด้วย Maps JavaScript API ถัดไป ให้ลองเพิ่มองค์ประกอบต่อไปนี้ลงในแผนที่
- เพิ่มปุ่มเพื่อเปิดและปิดจุดที่น่าสนใจ
- เพิ่มเส้นที่แสดงเส้นทางไปและกลับจากสถานที่ต่างๆ
- ตั้งค่าข้อจำกัดขอบเขตบางอย่างเพื่อควบคุมตำแหน่งที่ผู้ใช้สามารถย้ายมุมมองได้
- ดูไลบรารีเพิ่มเติมที่ใช้ได้กับ Maps JavaScript API ซึ่งเปิดใช้บริการเพิ่มเติม เช่น สถานที่หรือการค้นหาเส้นทาง
หากต้องการดูวิธีอื่นๆ เพิ่มเติมในการใช้งาน Google Maps Platform และ 3 มิติบนเว็บ ให้ไปที่ลิงก์ต่อไปนี้