1. ก่อนเริ่มต้น
บทแนะนำนี้จะอธิบายวิธีเพิ่มและจัดรูปแบบเครื่องหมาย 3 มิติในแอปพลิเคชัน นอกจากนี้ คุณยังจะได้เรียนรู้วิธีสร้างภาพเคลื่อนไหวแอปพลิเคชันด้วยการไปยังสถานที่ที่ต้องการและบินรอบๆ สถานที่นั้น
บทแนะนำนี้ต่อยอดจากแนวคิดที่ครอบคลุมใน codelab แรก โปรดทำ Codelab ดังกล่าวให้เสร็จสมบูรณ์เพื่อรับความรู้พื้นฐานที่จำเป็นสำหรับแอปพลิเคชันนี้ หากยังไม่ได้ดำเนินการ
สิ่งที่ต้องทำ
แอปพลิเคชันนี้จะแสดงภาพรวมของสำนักงานใหญ่ของ Google ในยุโรป ผู้ใช้สามารถเลือกสำนักงาน บินเข้าและรอบๆ เพื่อสำรวจ แล้วซูมออกเพื่อกลับไปที่มุมมองทั่วไป ฟีเจอร์เหล่านี้มักพบในแอปพลิเคชันการเดินทางและการสำรวจ ซึ่งมอบประสบการณ์ที่สมจริงยิ่งขึ้นให้แก่ผู้ใช้
ในโค้ดแล็บนี้ คุณจะได้สร้างเว็บแอป 3 มิติที่ทําสิ่งต่อไปนี้
- โหลด Maps JavaScript API แบบไดนามิก
- เพิ่มเครื่องหมาย 3 มิติลงในแผนที่
- จัดรูปแบบเครื่องหมายโดยใช้ SVG
- เพิ่มความสามารถในการบินไปยังและรอบๆ เครื่องหมาย
- แยกสถานที่ตั้งจากโค้ดเป็นอาร์เรย์
สิ่งที่คุณจะได้เรียนรู้
- วิธีการทำงานของเครื่องหมาย
- วิธีจัดสไตล์เครื่องหมาย
- วิธีที่ภาพเคลื่อนไหวทำงานร่วมกับฟังก์ชันในตัว
- การวางตำแหน่งกล้องเทียบกับตำแหน่งจุดเพื่อให้การจัดเฟรมดีขึ้น
- เคล็ดลับที่เป็นประโยชน์ในการจับภาพพารามิเตอร์ของกล้องเพื่อจัดเฟรมสิ่งต่างๆ ได้ดียิ่งขึ้น
ข้อกำหนดเบื้องต้น
คุณจะต้องทำความคุ้นเคยกับรายการต่างๆ ที่นี่เพื่อทํา Codelab นี้ให้เสร็จสมบูรณ์ หากคุ้นเคยกับการใช้งาน Google Maps Platform อยู่แล้ว ให้ข้ามไปดู Codelab
ผลิตภัณฑ์ Google Maps Platform ที่จําเป็น
ใน Codelab นี้ คุณจะใช้ผลิตภัณฑ์ Google Maps Platform ต่อไปนี้
- Maps JavaScript API
ข้อกำหนดอื่นๆ สำหรับ Codelab นี้
คุณต้องมีบัญชี บริการ และเครื่องมือต่อไปนี้จึงจะทำ Codelab นี้ให้เสร็จสมบูรณ์ได้
- บัญชี Google Cloud ที่เปิดใช้การเรียกเก็บเงิน
- คีย์ API ของ Google Maps Platform ที่เปิดใช้ Maps JavaScript API
- ความรู้พื้นฐานเกี่ยวกับ JavaScript, HTML และ CSS
- เครื่องมือแก้ไขข้อความหรือ IDE ที่คุณเลือกเพื่อบันทึกไฟล์ที่แก้ไขเพื่อดู
- เว็บเบราว์เซอร์สำหรับดูไฟล์ขณะทำงาน
2. ตั้งค่า
ตั้งค่า 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
3. ลูกโลกธรรมดา
ในการเริ่มสร้างแอปพลิเคชัน คุณจะต้องตั้งค่าพื้นฐาน ซึ่งจะทำให้เกิดภาพ "ลูกโลกสีน้ำเงิน" ของโลกในรูปแบบที่สมบูรณ์ที่สุดดังที่แสดงในภาพ
เพิ่มโค้ดสําหรับหน้าเริ่มต้น
หากต้องการเพิ่มลูกโลกลงในเว็บไซต์ คุณจะต้องเพิ่มโค้ดต่อไปนี้ลงในหน้าเว็บ ซึ่งจะเพิ่มส่วนสำหรับโปรแกรมโหลด Maps JavaScript API และฟังก์ชัน init ที่สร้างองค์ประกอบแผนที่ 3 มิติภายในหน้าเว็บที่คุณจะใช้เพิ่มโค้ดสำหรับเครื่องหมาย
ตรวจสอบว่าคุณได้เพิ่มคีย์ของคุณเอง (สร้างไว้ในส่วนตั้งค่า) ลงในหน้าเว็บแล้ว ไม่เช่นนั้นระบบจะไม่สามารถเริ่มต้นองค์ประกอบ 3 มิติได้
<!DOCTYPE html>
<html>
<head>
<title>Step 1 - Simple Globe</title>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<script>
(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: "<INSERT API KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map3D = null;
async function init() {
const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
map3D = new Map3DElement({
mode: MapMode.HYBRID,
});
document.body.append(map3D);
}
init();
</script>
</body>
</html>
เมื่อทำขั้นตอนนี้เสร็จแล้ว คุณก็พร้อมเริ่มจัดเฟรมสถานที่ที่น่าสนใจ ซึ่งจะทำในขั้นตอนถัดไป
4. เฟรมมุมมองแรก
เมื่อสร้างแผนที่ที่มีมุมมองลูกโลกแล้ว ขั้นตอนการติดตั้งใช้งานถัดไปคือการกําหนดเฟรมตําแหน่งเริ่มต้นที่ถูกต้อง ซึ่งช่วยให้ผู้ใช้เห็นภาพรวมของตำแหน่งที่ทำงานอยู่ได้ทันที
แม้ว่าตัวอย่างนี้จะมุ่งเน้นไปที่สำนักงานของ Google ในยุโรป แต่คุณใช้แนวทางนี้กับสถานที่ใดก็ได้ทั่วโลก ตั้งแต่ทั้งประเทศไปจนถึงตึกแถวเดียวในย่านเมือง ความเร็วและความยืดหยุ่นของผลิตภัณฑ์ช่วยให้คุณปรับขนาดแอปพลิเคชันจากทั่วโลกเป็นระดับท้องถิ่นได้โดยมีการเปลี่ยนแปลงโค้ดเพียงเล็กน้อย
คุณจะเริ่มด้วยการจัดเฟรมภาพครั้งแรกเพื่อให้แผนที่ 3 มิติมีลักษณะดังนี้
เล็งกล้องไปที่ยุโรป
หากต้องการให้จอแสดงผลแสดงตามที่แสดง คุณต้องจัดเฟรมจอแสดงผลอย่างถูกต้องราวกับว่าคุณกำลังจัดตำแหน่งกล้องในอวกาศเพื่อมองลงมายังสถานที่นั้น
ซึ่งจะใช้พารามิเตอร์จำนวนหนึ่งในการควบคุมแผนที่เพื่อตั้งค่ารายละเอียดของกล้องได้ คุณจะเห็นวิธีที่พารามิเตอร์โต้ตอบกันในโลก "จริง" ดังที่แสดงในแผนภาพ กล่าวโดยละเอียดคือ มีจุดศูนย์กลางที่กล้องกําลังมองอยู่และระยะห่างจากจุดที่คุณกําลังมอง (ระยะ) นอกจากนี้ คุณยังต้องตั้งค่าการเอียงมุมมองของกล้องด้วย (ไม่เช่นนั้นคุณจะมองตรงลงไปยังพื้นโลก)
การตั้งค่าสุดท้ายคือทิศทาง ซึ่งจะเป็นตัวกำหนดทิศทางของกล้อง ซึ่งวัดเป็นค่าออฟเซ็ตจากทิศเหนือ ระบบจะใช้ค่าเหล่านี้กับองค์ประกอบแผนที่ 3 มิติเป็นออบเจ็กต์เพื่อตั้งค่าการแสดงผลเริ่มต้น คุณจะเห็นสิ่งนี้ในโค้ดที่มีตัวสร้างองค์ประกอบ 3 มิติที่อัปเดตแล้ว
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.HYBRID
});
จับภาพพารามิเตอร์ของกล้อง
การจัดเฟรมมุมมองในแผนที่ 3 มิติต้องใช้การวางกล้องอย่างแม่นยำ ซึ่งอาจทำได้ยากโดยใช้โค้ดเพียงอย่างเดียว หากต้องการลดความซับซ้อนของกระบวนการนี้ ให้ใช้เคล็ดลับที่มีประโยชน์นี้: เพิ่มฟังก์ชันลงในหน้าเว็บที่จะบันทึกพารามิเตอร์ของกล้องเมื่อคุณคลิกมุมมองที่ต้องการ พารามิเตอร์จะแสดงผลในคอนโซล พร้อมที่จะคัดลอกไปยังการตั้งค่ากล้องของวัตถุ
คุณดูโค้ดที่อาจต้องการใช้ในภายหลังได้ โดยระบบจะเพิ่มโค้ดดังกล่าวลงในตัวอย่างของหน้านี้ที่แสดง แม้ว่าจะไม่อยู่ในตัวอย่างของหน้าต่อๆ ไปเนื่องจากไม่จําเป็นต่อ Codelab แต่คุณควรจดจําไว้หากต้องการสร้างการสาธิตที่สมจริงยิ่งขึ้นผ่านการวางตำแหน่งกล้องที่ดียิ่งขึ้น
map3D.addEventListener('gmp-click', (event) => {
console.log("camera: { center: { lat: " + map3D.center.lat + ", lng : " + map3D.center.lng + ", altitude: " + map3D.center.altitude + " }, range: " + map3D.range + ", tilt: " + map3D.tilt + " ,heading: " + map3D.heading + ", }");
console.log("{ lat: " + event.position.lat + ", lng : " + event.position.lng + ", altitude: " + event.position.altitude + " }");
// Stop the camera animation when the map is clicked.
map3D.stopCameraAnimation();
});
โปรดสังเกตการใช้ฟังก์ชัน stopCameraAnimation หากหน้าเว็บกำลังซูมเข้าหรือหมุนรอบตัว ความสามารถในการหยุดภาพเคลื่อนไหวที่กำลังเกิดขึ้นจะมีประโยชน์เพื่อให้คุณจับภาพตำแหน่งในการแสดงผล ณ ขณะนั้นได้ โค้ดนี้ช่วยให้คุณทําเช่นนั้นได้ ดูรายละเอียดเพิ่มเติมได้ในเอกสารประกอบของ stopCameraAnimation
ตัวอย่างเอาต์พุตจากการคลิกตามที่แสดงในคอนโซล
camera: { center: { lat: 51.39870122020001, lng : -0.08573187165829443, altitude: 51.66845062662254 }, range: 716.4743880553578, tilt: 50.5766672986501 ,heading: -1.048260134782318, }
step2.html:40 { lat: 51.398158351120536, lng : -0.08561139388593597, altitude: 51.860469133677626 }
ข้อความจากกล้องสามารถใช้เป็นอินพุต JSON ในวัตถุต่างๆ ในแผนที่ 3 มิติ เอาต์พุตที่ 2 คือตำแหน่งจุดจริงที่เกิดการคลิก ซึ่งมีประโยชน์ในการสร้างจุดหรือสิ่งต่างๆ สำหรับการวางตำแหน่งเครื่องหมาย
เมื่อจัดเฟรมหน้าเว็บอย่างถูกต้องแล้ว คุณจะเพิ่มเครื่องหมายได้ โปรดดูวิธีการในขั้นตอนถัดไป
โซลูชันของส่วน
ในขั้นตอนนี้ หน้าเว็บที่เสร็จสมบูรณ์จะแสดงเป็นโซลูชันเพื่อยืนยันการติดตั้งใช้งาน (หากคัดลอก โปรดตรวจสอบว่าคุณใช้คีย์ API ของคุณเอง)
<!DOCTYPE html>
<html>
<head>
<title>Step 2 - Europe View</title>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<script>
(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: "<INSERT API KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map3D = null;
async function init() {
const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.HYBRID,
});
map3D.addEventListener('gmp-click', (event) => {
console.log("camera: { center: { lat: " + map3D.center.lat + ", lng : " + map3D.center.lng + ", altitude: " + map3D.center.altitude + " }, range: " + map3D.range + ", tilt: " + map3D.tilt + " ,heading: " + map3D.heading + ", }");
console.log("{ lat: " + event.position.lat + ", lng : " + event.position.lng + ", altitude: " + event.position.altitude + " }");
map3D.stopCameraAnimation();
});
document.body.append(map3D);
}
init();
</script>
</body>
</html>
5. ตัวทำเครื่องหมายแบบง่าย
ในส่วนนี้ คุณจะได้เรียนรู้วิธีเพิ่มเครื่องหมายแรก ก่อนอื่น คุณจะได้ดูรายละเอียดทั่วไปเกี่ยวกับเครื่องหมาย
แผนที่ 3 มิติรองรับการสร้างคลาสเครื่องหมาย 2 คลาส ได้แก่ คลาส Marker3DElement และคลาส Marker3DInteractiveElement โดยตัวเลือกคลาสจะขึ้นอยู่กับว่าคุณต้องการเปิดใช้การคลิกเครื่องหมายหรือไม่ นอกเหนือจากนี้ องค์ประกอบเหล่านี้ก็เหมือนกันโดยพื้นฐาน คุณจึงต้องสร้าง Marker3DElement ก่อน แล้วจึง "อัปเกรด" เป็น Marker3DInteractiveElement ในขั้นตอนต่อๆ ไป
คุณดูโซลูชันทั้งหมดสำหรับขั้นตอนนี้ได้ที่ด้านล่าง
เพิ่มความสูงให้กับเครื่องหมาย
สิ่งแรกที่ควรทราบคือเครื่องหมายเป็นแบบ 3 มิติเช่นเดียวกับทุกอย่างในแผนที่ 3 มิติ ซึ่งหมายความว่าตำแหน่งอาจมีระดับความสูง (ระดับความสูง) และระดับความสูงนั้นอาจแสดงเป็นตำแหน่งที่สัมพันธ์กับระดับน้ำทะเล พื้นดิน ตาข่าย หรือตั้งค่าให้ยึดกับพื้นดินและละเว้นตำแหน่งระดับความสูง ดูรายละเอียดเพิ่มเติมได้ในส่วนค่าคงที่ระดับความสูงในเอกสารประกอบของ AltitudeMode
นอกจากนี้ คุณยังตั้งค่าให้เครื่องหมายยื่นออกมาหรือไม่ได้ด้วยโดยใช้ค่า extruded ตัวเลือกนี้จะกำหนดว่าเครื่องหมายจะมีเส้นเล็ก ๆ ลากลงไปที่พื้นหรือไม่เพื่อช่วยแสดงตำแหน่งจริงโดยสัมพันธ์กับระดับความสูง ซึ่งมีประโยชน์ในการเลือกจุดบนพื้น คุณสามารถดูตัวอย่างได้จากตำแหน่ง Google UK ทั้ง 2 รายการมีการยื่นออกมาและมีการตั้งค่าตำแหน่งเป็น "ความสูงแบบสัมบูรณ์" ระยะแรกอยู่ที่ 75 เมตร และระยะที่ 2 อยู่ที่ 125 เมตร
|
|
ระดับความสูง 75 เมตร | ระดับความสูง 125 เมตร |
ซ่อนหรือแสดงเครื่องหมายที่มีส่วนที่บดบังและมีการชน
แม้ว่าในการแสดงตัวอย่างของเรา ตำแหน่งของมาร์กเกอร์อาจไม่สำคัญมากนักเนื่องจากอยู่ห่างกันมาก แต่คุณก็ควบคุมสิ่งที่จะเกิดขึ้นกับมาร์กเกอร์เหล่านั้นได้โดยใช้ค่า collisionBehavior หรือ drawsWhenOccluded สำหรับมาร์กเกอร์ที่อาจซ้อนทับกันหรืออาจอยู่หลังอาคาร
สำหรับลักษณะการชน คุณมีตัวเลือกต่อไปนี้
REQUIRED: (ค่าเริ่มต้น) แสดงเครื่องหมายเสมอ ไม่ว่าจะมีการชนกันหรือไม่ก็ตามOPTIONAL_AND_HIDES_LOWER_PRIORITYแสดงเครื่องหมายเฉพาะในกรณีที่ไม่ซ้อนทับกับเครื่องหมายอื่นๆ หากเครื่องหมาย 2 รายการประเภทนี้ซ้อนทับกัน ระบบจะแสดงเครื่องหมายที่มีzIndexสูงกว่า หากมีzIndexเดียวกัน ระบบจะแสดงรายการที่มีตำแหน่งแนวตั้งของหน้าจอต่ำกว่าREQUIRED_AND_HIDES_OPTIONALแสดงเครื่องหมายเสมอไม่ว่าจะมีการทับซ้อนกันหรือไม่ และซ่อนเครื่องหมายหรือป้ายกำกับOPTIONAL_AND_HIDES_LOWER_PRIORITYที่จะทับซ้อนกับเครื่องหมาย
ความแตกต่างของการแสดงเครื่องหมายตามลักษณะการชนที่กําหนดจะแสดงในรูปภาพ เครื่องหมายทั้งหมดจะแสดงเมื่อตั้งค่าเป็น REQUIRED แต่หากคุณใช้ REQUIRED_AND_HIDES_OPTIONAL ในกรณีนี้เครื่องหมายที่ต่ำกว่าบนหน้าจอจะแสดง (คุณสามารถเล่นกับ zIndex เพื่อให้เครื่องหมายอื่นๆ แสดงทับกันได้หากต้องการ)
|
|
ต้องระบุ | REQUIRED_AND_HIDES_OPTIONAL |
สําหรับการบดบัง คุณสามารถเลือกได้ว่าจะวาดเครื่องหมายไว้หลังอาคารหรือไม่ ดังที่แสดงในรูปภาพต่อไปนี้ เมื่อตั้งค่า drawsWhenOccluded เป็น "จริง" ระบบจะแสดงเครื่องหมายที่มืดลงเล็กน้อยเมื่อวาดอยู่หลังอาคาร เมื่อตั้งค่าเป็น "เท็จ" ระบบจะซ่อนเครื่องหมายเมื่ออยู่หลังอาคาร ดูรายละเอียดเพิ่มเติมได้ในตารางต่อไปนี้
|
|
|
|
ดังที่ได้กล่าวไว้ เครื่องหมายที่ซ่อนอยู่จากการทับซ้อนกันจะแสดงเป็นสีจางหากอนุญาตให้วาดเครื่องหมายที่ถูกบดบัง ในรูปภาพ คุณจะเห็นเครื่องหมายบางส่วนที่ซ่อนอยู่หลังอาคาร และบางส่วนที่ซ่อนอยู่หลังเครื่องหมายอื่นๆ
ดูรายละเอียดเพิ่มเติมจากตัวอย่าง collision-behavior ในแผนที่ 2 มิติ
ล้างผืนผ้าใบ
ตอนนี้ถึงเวลาสร้างเครื่องหมายแรก คุณสามารถปิดใช้ป้ายกำกับเริ่มต้นในแผนที่ 3 มิติเพื่อให้ผู้ใช้โฟกัสที่เครื่องหมายได้
ตั้งค่า mode ขององค์ประกอบแผนที่ 3 มิติเป็น SATELLITE
ดูข้อมูลเพิ่มเติมได้ที่mode
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.SATELLITE
});
ซึ่งจะทำให้เกิดแผนที่ 3 มิติดังต่อไปนี้
เพิ่มเครื่องหมายแรก
ตอนนี้คุณเพิ่มเครื่องหมายแรกในผืนผ้าใบที่สะอาดได้แล้ว พารามิเตอร์หลัก ได้แก่ ตําแหน่งและป้ายกำกับ
หากต้องการเพิ่มเครื่องหมาย ให้ตั้งค่าตำแหน่งของเครื่องหมาย นอกจากนี้ คุณยังใส่ป้ายกำกับซึ่งปรากฏเหนือเครื่องหมายและองค์ประกอบอื่นๆ ตามที่อธิบายไว้ในเอกสารประกอบของ Marker3DElement ได้ด้วย
หากต้องการเพิ่มเครื่องหมาย ให้เพิ่มโค้ดต่อไปนี้หลังบรรทัดที่ซ่อนป้ายกำกับเริ่มต้นดังที่แสดง
const marker = new Marker3DElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
map3D.append(marker);
หลังจากสร้างเครื่องหมายแล้ว ให้เพิ่มลงในแผนที่ 3 มิติโดยใช้เมธอด append โปรดทราบว่าเครื่องหมายจะจัดเก็บเป็นอาร์เรย์ขององค์ประกอบย่อยภายในแผนที่ 3 มิติ หากต้องการแก้ไขเครื่องหมาย คุณจะต้องเข้าถึงผ่านอาร์เรย์นี้
ตรวจสอบว่า Marker3DElement โหลดจาก Maps JavaScript API โดยการใส่ลงในรายการไลบรารีเมื่อโหลด API
const { Map3DElement, MapMode, Marker3DElement } = await google.maps.importLibrary("maps3d");
เมื่อโหลดหน้าเว็บแล้ว คุณจะเห็นทั้งยุโรปพร้อมเครื่องหมายเหนือสำนักงานในลอนดอน ดังที่แสดงในภาพเคลื่อนไหว คุณสามารถซูมเข้าด้วยตนเองเพื่อดูเครื่องหมายเหนือตำแหน่งที่สร้างไว้
เมื่อโหลดเครื่องหมายแรกแล้ว ขั้นตอนถัดไปคือทำให้เครื่องหมายดูดีขึ้น
โซลูชันของส่วน
ในขั้นตอนนี้ หน้าเว็บที่เสร็จสมบูรณ์จะแสดงเป็นโซลูชันเพื่อยืนยันการติดตั้งใช้งาน (หากคัดลอก โปรดตรวจสอบว่าคุณใช้คีย์ API ของคุณเอง)
<!DOCTYPE html>
<html>
<head>
<title>Step 3 - Simple Marker</title>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<script>
(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: "<INSERT API KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map3D = null;
async function init() {
const { Map3DElement, MapMode, Marker3DElement } = await google.maps.importLibrary("maps3d");
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.SATELLITE,
});
const marker = new Marker3DElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
map3D.append(marker);
document.body.append(map3D);
}
init();
</script>
</body>
</html>
6. เครื่องหมาย SVG
ในขั้นตอนนี้ คุณจะทำให้เครื่องหมายดูดีขึ้นโดยเปลี่ยนเครื่องหมายเพื่อเพิ่มธงลงในเครื่องหมายเพื่อแสดงถึงประเทศที่ตั้งอยู่ มาดูวิธีดำเนินการกัน โดยคุณจะต้องคุ้นเคยกับ PinElement
สุดท้าย คุณจะเห็นรูปลักษณ์ใหม่ดังที่แสดง
การปรับแต่งขั้นพื้นฐานด้วย PinElement
องค์ประกอบหนึ่งที่แชร์ระหว่างเครื่องหมายใน JavaScript API ไม่ว่าจะเป็นแผนที่ 2 มิติหรือ 3 มิติคือ PinElement เมื่อคุณเพิ่ม Marker3DElement ลงใน Map3DElement คุณจะเพิ่ม PinElement ลงใน Marker3DElement ในฐานะองค์ประกอบย่อยขององค์ประกอบนั้น
PinElement มีความสามารถในการเปลี่ยนเครื่องหมายปกติในระดับพื้นฐานเพื่อตั้งค่าสีเส้นขอบ สีจุดภายใน (หรือสัญลักษณ์) และสีพื้นหลัง คุณจะเห็นข้อมูลเหล่านี้ในรูปภาพที่แสดงเครื่องหมาย 2 มิติ
นอกจากนี้ คุณยังกำหนดขนาดเครื่องหมายผ่านองค์ประกอบได้โดยการตั้งค่าค่าสเกล (>1 หมายถึงใหญ่กว่าปกติ และ <1 หมายถึงเล็กกว่าตามสัดส่วน)
นอกจากนี้ คุณยังแทนที่สัญลักษณ์ด้วยรูปภาพหรือไฟล์ SVG ได้หากต้องการให้ดูมีเอกลักษณ์มากขึ้นแต่ยังคงรูปลักษณ์หมุดแผนที่ของ PinElement มาตรฐานไว้
นอกเหนือจาก PinElements
ในขั้นตอนนี้ คุณจะอัปเดต PinElement มาตรฐานด้วย Flag svg และสีต่างๆ แต่โปรดทราบว่าคุณเปลี่ยนรูปลักษณ์ของหมุดได้ทั้งหมดเพื่อให้ดูไม่เหมือนหมุดบนแผนที่ นอกจากนี้ คุณยังใส่กราฟิกใหม่ในเครื่องหมายได้โดยใช้เทมเพลต เช่น HTMLImageElement และ SVGElement ดูรายละเอียดเพิ่มเติมเกี่ยวกับวิธีการนี้ได้ในเอกสารประกอบ Marker3DElement-Slots
หากต้องการดูว่าทำได้ถึงขั้นไหน โปรดดูตัวอย่างต่อไปนี้ซึ่งแสดงตัวอย่างการจัดสไตล์เครื่องหมายโดยใช้เทคนิคต่างๆ
|
|
เครื่องหมายที่มีการปรับแต่งพื้นฐานผ่าน PinElement โปรดดูตัวอย่าง | เครื่องหมายที่มีการปรับแต่งที่ซับซ้อนผ่านเทมเพลตผ่าน SVG และรูปภาพ โปรดดูตัวอย่าง |
เพิ่มPinElement
หากต้องการเปลี่ยนรูปลักษณ์ของเครื่องหมาย สิ่งแรกที่ต้องทำคือตรวจสอบว่าได้เพิ่มคลัง PinElement ลงในหน้าแล้ว ซึ่งทำได้ด้วยการเพิ่มบรรทัดโค้ดต่อไปนี้หลังจากนําเข้าไลบรารี maps3d แล้ว
const { Map3DElement, MapMode, Marker3DElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
ตอนนี้โหลดองค์ประกอบแล้ว คุณจะอ้างอิงและสร้าง PinElement ได้ ดูโค้ด แล้วเพิ่มโค้ดนั้นไว้ระหว่างตำแหน่งที่สร้างเครื่องหมายและเพิ่มเครื่องหมายต่อท้ายแผนที่ 3 มิติ
const marker = new Marker3DElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const markerPin = new PinElement({
"background": 'white',
"glyph": new URL(base + '/images/gb.svg'),
"scale": 1.0,
});
marker.append(markerPin);
map3D.append(marker);
เนื่องจากคุณไม่ได้โหลดหมุดพื้นฐานเพียงอย่างเดียว จึงมีสิ่งต่างๆ ที่ต้องทํานอกเหนือจากการตั้งค่า PinElement ที่มีสีพื้นหลังและขนาดที่เกี่ยวข้อง
ก่อนอื่นคุณต้องสร้างรูปภาพ svg อ้างอิงสำหรับไอคอนธง ซึ่งในกรณีนี้คือธงสหราชอาณาจักร คุณดาวน์โหลดได้จากคอลเล็กชัน เช่น นี้ที่ https://flagicons.lipis.dev/
เมื่อคุณมีไอคอนแล้ว คุณสามารถวางไอคอนไว้ในตำแหน่งที่เว็บไซต์จะค้นหาได้ ในกรณีนี้ คุณสามารถฮาร์ดโค้ดตำแหน่งของรูปภาพหรือใช้ตำแหน่งเว็บไซต์ปัจจุบันเป็นข้อมูลโค้ดย่อยของไดเรกทอรีก็ได้ ดังที่แสดงที่นี่ด้วยตัวแปรพื้นฐาน จากนั้นคุณสามารถลิงก์ตำแหน่งนี้ในเซิร์ฟเวอร์กับธงที่เหมาะสม ซึ่งในกรณีนี้อยู่ภายใต้ '/images/gb.svg'
ซึ่งจะสร้าง PinElement ที่มีลักษณะดังที่แสดง
เมื่อวางธงในตำแหน่งที่ถูกต้องและวางโค้ดในตำแหน่งที่ถูกต้องแล้ว คุณควรมีแผนที่ 3 มิติที่มีลักษณะดังนี้
ตอนนี้เครื่องหมายของเราพร้อมใช้งานแล้ว และคุณยังเปลี่ยนให้คลิกได้เพื่อเพิ่มการโต้ตอบได้ด้วย ซึ่งจะดำเนินการในขั้นตอนถัดไป
โซลูชันของส่วน
ในขั้นตอนนี้ หน้าเว็บที่เสร็จสมบูรณ์จะแสดงเป็นโซลูชันเพื่อยืนยันการติดตั้งใช้งาน (หากคัดลอก โปรดตรวจสอบว่าคุณใช้คีย์ API ของคุณเอง)
และอย่าลืมว่าคุณต้องดาวน์โหลดไฟล์ SVG (หรือไฟล์ PNG ตามที่คุณต้องการ) ของธงแล้วจัดเก็บไว้ในไดเรกทอรีที่หน้าเว็บของคุณจะพบ (ในที่นี้จัดเก็บไว้ในโฟลเดอร์ images)
<!DOCTYPE html>
<html>
<head>
<title>Step 4 - SVG Marker</title>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<script>
(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: "<INSERT API KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map3D = null;
async function init() {
const { Map3DElement, MapMode, Marker3DElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.SATELLITE,
});
const marker = new Marker3DElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const markerPin = new PinElement({
"background": 'white',
"glyph": new URL(base + '/images/gb.svg'),
"scale": 1.0,
});
marker.append(markerPin);
map3D.append(marker);
document.body.append(map3D);
}
init();
</script>
</body>
</html>
7. เครื่องหมายแบบอินเทอร์แอกทีฟ
ในขั้นตอนสุดท้าย ระบบจะเพิ่มเครื่องหมายลงในหน้า แต่นอกจากดูดีแล้ว เครื่องหมายก็ไม่ได้ทำอะไรมากนัก และคุณยังคงต้องโต้ตอบกับแผนที่ 3 มิติในลักษณะเดิม ขั้นตอนถัดไปคือเพิ่มความสามารถในการทําบางอย่างกับเครื่องหมายเมื่อคุณคลิก ซึ่งจะช่วยให้เครื่องหมายตอบสนองต่อการโต้ตอบของผู้ใช้
หากต้องการเพิ่มฟีเจอร์นี้ คุณต้องเปลี่ยนรูปแบบ Marker3DElement เป็น Marker3DInteractiveElement เมื่อดำเนินการเสร็จแล้ว คุณจะเห็นหน้าเว็บที่มีลักษณะคล้ายกัน แต่ตอนนี้เมื่อคลิกเครื่องหมาย ระบบจะแสดงการแจ้งเตือนขึ้นมา ซึ่งจะมีลักษณะดังนี้
เปลี่ยนคลาสเครื่องหมายก่อน
หากต้องการเพิ่มความโต้ตอบให้กับเครื่องหมาย คุณต้องตรวจสอบว่าเครื่องหมายใช้คลาสที่ถูกต้อง Marker3DInteractiveElement คือสิ่งที่ต้องใช้ แต่เนื่องจากเป็นส่วนขยายของ Marker3DElement คุณจึงไม่ต้องดำเนินการใดๆ นอกเหนือจากการโหลดคลาสใหม่และเปลี่ยนชื่อคลาสในคอนสตรคเตอร์
const { Map3DElement, MapMode, Marker3DInteractiveElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.SATELLITE,
});
const marker = new Marker3DInteractiveElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
ประการที่ 2 เพิ่มเหตุการณ์คลิกลงในเครื่องหมาย
จากนั้นเพิ่มเหตุการณ์การคลิกลงในเครื่องหมายเพื่อจัดการการโต้ตอบของผู้ใช้และตอบสนอง ในข้อมูลโค้ด คุณจะเห็นเหตุการณ์คลิกที่เพิ่มลงในเครื่องหมาย ในกรณีนี้ ระบบจะแสดงข้อความแจ้งและป๊อปอัปข้อความที่แสดงป้ายกำกับจากเครื่องหมาย ซึ่งได้รับจากเป้าหมายของเหตุการณ์ที่เริ่มทํางาน ซึ่งช่วยให้เราเข้าถึงพร็อพเพอร์ตี้ป้ายกำกับได้ เพิ่มโค้ดต่อไปนี้ลงในแอปพลิเคชันทันทีหลังจากสร้างเครื่องหมาย
marker.addEventListener('gmp-click', (event) => {
alert('You clicked on : ' + event.target.label);
event.stopPropagation();
});
โปรดทราบว่าเหตุการณ์ stopPropagation ใช้เพื่อให้แน่ใจว่าตัวรับฟังการคลิกอื่นๆ ในกองจะทริกเกอร์บนออบเจ็กต์ที่อยู่เบื้องหลัง เช่น แคนวาสหลักของแผนที่ 3 มิติ
ตอนนี้เมื่อเรียกใช้แอปพลิเคชัน คุณควรได้ผลลัพธ์ต่อไปนี้
ความสามารถในการดำเนินการบางอย่างเมื่อมีการคลิกเครื่องหมายช่วยให้คุณเพิ่มภาพเคลื่อนไหวลงในหน้าเว็บได้ในขั้นตอนถัดไป
โซลูชันของส่วน
ในขั้นตอนนี้ หน้าเว็บที่เสร็จสมบูรณ์จะแสดงเป็นโซลูชันเพื่อยืนยันการติดตั้งใช้งาน (หากคัดลอก โปรดตรวจสอบว่าคุณใช้คีย์ API ของคุณเอง)
<!DOCTYPE html>
<html>
<head>
<title>Step 5 - Interactive Marker</title>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<script>
(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: "<INSERT API KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map3D = null;
async function init() {
const { Map3DElement, MapMode, Marker3DInteractiveElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.SATELLITE,
});
const marker = new Marker3DInteractiveElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
marker.addEventListener('gmp-click', (event) => {
alert('You clicked on : ' + event.target.label);
event.stopPropagation();
});
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const markerPin = new PinElement({
"background": 'white',
"glyph": new URL(base + '/images/gb.svg'),
"scale": 1.0,
});
marker.append(markerPin);
map3D.append(marker);
document.body.append(map3D);
}
init();
</script>
</body>
</html>
8. บินไปที่
ในขั้นตอนนี้ คุณจะใช้ความสามารถในการคลิกเครื่องหมายเพื่อเพิ่มภาพเคลื่อนไหวเพื่อไปยังตำแหน่งของจุดนั้น คุณดูการทํางานได้ที่นี่
การทำภาพเคลื่อนไหวด้วย flyCameraTo
หากต้องการเพิ่มข้อมูลนี้ลงในหน้าเว็บ คุณจะใช้เมธอด flyCameraTo ของ 3D Maps ซึ่งจะแสดงภาพเคลื่อนไหวของกล้องระหว่างตำแหน่งกล้องที่คุณอยู่ไปยังตำแหน่งกล้องที่ต้องการดู โดยจะมีการหาค่าระหว่าง 2 ตำแหน่งดังกล่าวและแสดงภาพเคลื่อนไหวของเที่ยวบินภายในแผนที่ 3 มิติ
เมื่อใช้ flyCameraTo คุณต้องระบุ FlyToAnimationOptions ซึ่งมี 2 พร็อพเพอร์ตี้ ได้แก่ endCamera ซึ่งเป็นตำแหน่งที่กล้องควรชี้เมื่อภาพเคลื่อนไหวสิ้นสุด และ durationMillis ซึ่งเป็นระยะเวลาเป็นมิลลิวินาทีที่ใช้ในการเปลี่ยน
ในตัวอย่างนี้ ตั้งค่ากล้องให้มองไปที่อาคารซึ่งเป็นตำแหน่งเครื่องหมาย โดยเอียงกล้อง 65 องศา ระยะ 500 เมตร และชี้ไปทางทิศเหนือด้วยทิศทาง 0 องศา ตั้งเวลาของภาพเคลื่อนไหวเป็น 12,500 มิลลิวินาที (12.5 วินาที)
แทนที่เหตุการณ์การแจ้งเตือนปัจจุบันในหน้าด้วยข้อมูลโค้ด flyCameraTo
marker.addEventListener('gmp-click', (event) => {
map3D.flyCameraTo({
endCamera: {
center: marker.position,
tilt: 65,
range: 500,
heading: 0,
},
durationMillis: 12500,
});
event.stopPropagation();
});
เพียงเท่านี้ คุณก็ควรรีเฟรชหน้าเว็บแล้วคลิกเครื่องหมายเพื่อไปยัง Google UK ดังที่แสดงในภาพเคลื่อนไหวต่อไปนี้
ในขั้นตอนนี้ คุณได้เพิ่มเครื่องหมายที่คลิกได้ซึ่งจะย้ายกล้องไปยังตำแหน่งของเครื่องหมาย ในขั้นตอนถัดไป คุณจะเพิ่มความสามารถในการบินกล้องรอบจุดเพื่อให้กล้องโคจรรอบสถานที่
โซลูชันของส่วน
ในขั้นตอนนี้ หน้าเว็บที่เสร็จสมบูรณ์จะแสดงเป็นโซลูชันเพื่อยืนยันการติดตั้งใช้งาน (หากคัดลอก โปรดตรวจสอบว่าคุณใช้คีย์ API ของคุณเอง)
<!DOCTYPE html>
<html>
<head>
<title>Step 6 - Zoom To</title>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<script>
(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: "<INSERT API KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map3D = null;
async function init() {
const { Map3DElement, MapMode, Marker3DInteractiveElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
mode: MapMode.SATELLITE,
});
const marker = new Marker3DInteractiveElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
marker.addEventListener('gmp-click', (event) => {
map3D.flyCameraTo({
endCamera: {
center: marker.position,
tilt: 65,
range: 500,
heading: 0,
},
durationMillis: 12500,
});
event.stopPropagation();
});
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const markerPin = new PinElement({
"background": 'white',
"glyph": new URL(base + '/images/gb.svg'),
"scale": 1.0,
});
marker.append(markerPin);
map3D.append(marker);
document.body.append(map3D);
}
init();
</script>
</body>
</html>
9. บินไปรอบๆ
องค์ประกอบสุดท้ายของภาพเคลื่อนไหวคือการใช้เมธอด flyCameraAround เพื่อแสดงภาพเคลื่อนไหวของการโคจรรอบอาคาร สุดท้าย คุณจะมีภาพเคลื่อนไหวที่บินไปยังอาคารแล้วบินรอบๆ อาคารดังที่แสดงในภาพเคลื่อนไหว ตัวอย่างนี้อาจสั้นไปหน่อยสำหรับการใช้งานจริง แต่มีประโยชน์ในการแสดงให้เห็นวิธีการทํางานของการดำเนินการโดยไม่ต้องใช้เวลานานเกินไป คุณลองปรับเวลาต่างๆ จนกว่าจะได้ค่าที่เหมาะกับคุณ
ไปดูรอบๆ กัน
เมธอด flyCameraAround คล้ายกับฟังก์ชัน flyCameraTo ตรงที่ใช้ตัวเลือกจำนวนหนึ่งเป็นอินพุตที่ควบคุมตำแหน่งที่จะโคจร เป็นพารามิเตอร์ของกล้อง และเวลาเป็นมิลลิวินาทีที่ใช้ในการโคจร สุดท้าย คุณยังระบุจํานวนรอบที่จะแสดงในช่วงเวลาที่ระบุได้ด้วย คุณดูตัวเลือกทั้งหมดได้ที่นี่ใน FlyAroundAnimationOptions
แต่เดี๋ยวก่อน
ในภาพเคลื่อนไหว คุณจะเห็นภาพเคลื่อนไหวบินไปยังสถานที่ตั้งแล้วบินรอบๆ สถานที่นั้น โดยเชื่อมโยงภาพเคลื่อนไหวเข้าด้วยกัน โดยคุณใช้เหตุการณ์ gmp-animationend ของ Maps 3 มิติเพื่อให้แน่ใจว่าภาพเคลื่อนไหวปัจจุบันเล่นจบแล้วก่อนที่จะเล่นภาพเคลื่อนไหวถัดไป ภาพเคลื่อนไหวนี้ควรแสดงเพียงครั้งเดียวก่อนที่จะหยุด
ตรวจสอบโค้ด แล้วแทรกโค้ดดังกล่าวต่อจากโค้ดที่เพิ่มไว้ในส่วนก่อนหน้า
marker.addEventListener('gmp-click', (event) => {
map3D.flyCameraTo({
endCamera: {
center: marker.position,
tilt: 65,
range: 500,
heading: 0,
},
durationMillis: 5000,
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraAround({
camera: {
center: marker.position,
tilt: 65,
range: 500,
heading: 0,
},
durationMillis: 5000,
rounds: 1
});
}, { once: true });
event.stopPropagation();
});
การเพิ่มความสามารถในการรอเหตุการณ์ gmp-animationend จะช่วยให้เรียกเหตุการณ์ flyCameraAround ได้ การตั้งจุดเริ่มต้นให้เหมือนกับที่ใช้กับกล้องปลายทางของวิธีการไปยังจุดหมายจะทำให้การเปลี่ยนเป็นไปอย่างราบรื่น (เพื่อไม่ให้เกิดการสั่นไหวเมื่อไปยังตำแหน่งใหม่) อีกครั้ง durationMillis มีการตั้งค่าเพื่อควบคุมระยะเวลาที่ใช้แสดงภาพเคลื่อนไหว ในกรณีนี้ เมธอดจะใช้ตัวเลือกอื่นด้วย ซึ่งก็คือ rounds และตั้งค่าเป็น 1
ซึ่งหมายความว่ากล้องจะหมุนรอบจุดนั้นๆ 1 ครั้งใน 5 วินาที คุณลองใช้ค่าเหล่านี้ได้ตามต้องการเพื่อหาจำนวนที่เหมาะกับคุณ
เมื่อถึงจุดนี้ ภาพเคลื่อนไหวจะสิ้นสุดลง แต่คุณไม่ต้องการให้เหตุการณ์ gmp-animationend ทำงานอีกครั้งด้วยโค้ดนี้ ซึ่งจะทำให้การโคจรเกิดขึ้นอย่างไม่มีที่สิ้นสุด วิธีหลีกเลี่ยงปัญหานี้คือ ตัวเลือกสำหรับ Listener ที่มีการตั้งค่า once ให้เท่ากับ true ซึ่งหมายความว่าระบบจะนำเหตุการณ์ออกเมื่อดำเนินการเสร็จสมบูรณ์แล้ว เพื่อหลีกเลี่ยงการเกิดลูปที่ไม่มีที่สิ้นสุด
เมื่อเพิ่มแล้ว คุณควรเรียกใช้โซลูชันและเห็นภาพเคลื่อนไหวบินไปรอบๆ เครื่องหมายที่ส่วนท้ายดังที่แสดงในภาพเคลื่อนไหวต่อไปนี้
ในขั้นตอนนี้ คุณจะมีเครื่องหมายที่คลิกได้ จากนั้นกล้องจะไปยังและรอบๆ ตำแหน่งเครื่องหมาย ในขั้นตอนถัดไป เราต้องเริ่มเพิ่มจุดอื่นๆ และอนุญาตให้เราย้ายไปมาระหว่างจุด
โซลูชันของส่วน
ในขั้นตอนนี้ หน้าเว็บที่เสร็จสมบูรณ์จะแสดงเป็นโซลูชันเพื่อยืนยันการติดตั้งใช้งาน (หากคัดลอก โปรดตรวจสอบว่าคุณใช้คีย์ API ของคุณเอง)
<!DOCTYPE html>
<html>
<head>
<title>Step 7 - Zoom Around</title>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<script>
(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: "<INSERT API KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map3D = null;
const europeCamera = {
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
};
async function init() {
const { Map3DElement, MapMode, Marker3DInteractiveElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
...europeCamera,
mode: MapMode.SATELLITE,
});
const marker = new Marker3DInteractiveElement({
position: { lat: 51.5332, lng: -0.1260, altitude: 75 },
label: 'Google UK',
altitudeMode: 'ABSOLUTE',
extruded: true,
});
marker.addEventListener('gmp-click', (event) => {
map3D.flyCameraTo({
endCamera: {
center: marker.position,
tilt: 65,
range: 500,
heading: 0,
},
durationMillis: 5000,
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraAround({
camera: {
center: marker.position,
tilt: 65,
range: 500,
heading: 0,
},
durationMillis: 5000,
rounds: 1
});
}, { once: true });
event.stopPropagation();
});
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const markerPin = new PinElement({
"background": 'white',
"glyph": new URL(base + '/images/gb.svg'),
"scale": 1.0,
});
marker.append(markerPin);
map3D.append(marker);
document.body.append(map3D);
}
init();
</script>
</body>
</html>
10. ปารีส
แม้ว่าลอนดอนจะเป็นเมืองที่ยอดเยี่ยม แต่ดูเหมือนว่าหน้าเว็บจะดูโล่งๆ ไปหน่อย เราจึงจะเพิ่มสถานที่ใหม่ๆ สักแห่งโดยเริ่มจากปารีส ในการดําเนินการนี้ คุณสามารถใช้อาร์เรย์เพื่อเก็บรายละเอียดเฉพาะของสถานที่ทั้งหมด แล้วนําไปใช้เป็นอินพุตของฟังก์ชันและตัวแปรที่กําหนดพารามิเตอร์การแสดงเครื่องหมาย รวมถึงการไปยังและรอบๆ สถานที่ตั้งของกล้อง ซึ่งตามที่ได้กล่าวไว้ก่อนหน้านี้ ตำแหน่งนี้อาจแตกต่างจากตำแหน่งจุดเครื่องหมายเพื่อจัดเฟรมภาพอาคารให้ดีขึ้น เป็นต้น
อาร์เรย์ตำแหน่ง
คุณสามารถใช้อาร์เรย์ออบเจ็กต์ JSON ขนาดเล็กเพื่อเก็บข้อมูลนี้เพื่อไม่ให้ต้องเขียนโค้ดรายละเอียดทั้งหมดเกี่ยวกับสถานที่หนึ่งๆ เช่น กล้องดูภาพ จุดเครื่องหมาย และตัวเลือกการแสดงผล จากนั้นจะใช้ได้เมื่อสร้างเครื่องหมายและใช้ในแอปพลิเคชัน คุณดูตัวอย่างนี้ได้ในข้อมูลโค้ด ซึ่งสร้างตัวแปรชื่อ officeLocations เพื่อเก็บอาร์เรย์
เพิ่มโค้ดต่อไปนี้ก่อนฟังก์ชัน init และโปรดทราบว่ามีการย้ายตัวแปรพื้นฐานไว้นอกฟังก์ชัน init เพื่อให้ใช้กับสถานที่ตั้งของสำนักงานทั้งหมดได้
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const europeCamera = {
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
};
const officeLocations = [
{
"name": "Google France",
"camera": {
"center": { lat: 48.877276, lng: 2.329978, altitude: 48 },
"range": 178,
"tilt": 57.48,
"heading": -17,
},
"point": { lat: 48.8775183, lng: 2.3299791, altitude: 60 },
"pin": {
"background": 'white',
"glyph": new URL(base + '/images/fr.svg'),
"scale": 1.0,
},
},
{
"name": "Google UK",
"camera": {
"center": { lat: 51.5332, lng: -0.1260, altitude: 38.8 },
"range": 500,
"tilt": 56.21672368296945,
"heading": -31.15763027564165,
},
"point": { lat: 51.5332, lng: -0.1260, altitude: 75 },
"pin": {
"background": 'white',
"glyph": new URL(base + '/images/gb.svg'),
"scale": 1.0,
},
}]
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
สถานที่ตั้งของสำนักงานแต่ละแห่งมีพร็อพเพอร์ตี้ต่อไปนี้
- name : ชื่อของสถานที่
- camera : มุมมองเริ่มต้นเพื่อดูตำแหน่งที่จะบินไปและรอบๆ
- point : ตำแหน่งที่จะวางเครื่องหมาย
- pin : รายละเอียดของสีหมุดและพร็อพเพอร์ตี้สัญลักษณ์หมุด
มุมอื่น
คุณอาจสังเกตเห็นว่าสำหรับสหราชอาณาจักร จุดศูนย์กลางของกล้องและจุดเครื่องหมายเหมือนกัน (ยกเว้นระดับความสูง) ส่วนสำหรับฝรั่งเศส กล้องและจุดนั้นแตกต่างกัน เนื่องจากสถานที่ตั้งในฝรั่งเศสต้องมีเครื่องหมายอยู่ในตำแหน่งที่แตกต่างจากมุมมองกล้องเริ่มต้น ซึ่งจะให้มุมมองทั้งอาคารที่ดีกว่าเมื่อบินไปรอบๆ อาคาร เมื่อเทียบกับมุมมองที่อาจได้หากใช้จุดเครื่องหมาย
กลับไปที่ยุโรป
ฟังก์ชันอย่างหนึ่งของการมีจุดมากขึ้นคือการเพิ่มข้อกำหนดในการย้ายระหว่างจุด คุณอาจใช้เมนูแบบเลื่อนลงเพื่อให้ผู้ใช้เลือกได้ แต่ในตัวอย่างนี้ กล้องจะบินกลับไปยังมุมมองยุโรปทุกครั้งเพื่อให้ผู้ใช้เลือกสถานที่อื่นได้
ซึ่งจะต้องจัดเก็บมุมมองเริ่มต้นไว้ในตัวแปรที่สามารถใช้เพื่อรีเซ็ตกล้องเป็นมุมมองทั้งทวีปยุโรป ในตัวอย่างนี้ ให้เพิ่มตัวแปรใหม่ชื่อ europeCamera เพื่อจัดเก็บข้อมูลนี้ไว้ใช้ภายหลัง
อัปเดตฟังก์ชัน init
การแก้ไขแรกที่คุณต้องทำคือใช้ออบเจ็กต์ europeCamera เป็นอินพุตเมื่อสร้าง Map3DElement
การแก้ไขครั้งที่ 2 ที่คุณต้องทำคือตัดส่วนการสร้างเครื่องหมายในลูปเพื่ออัปเดตด้วยพารามิเตอร์ที่จัดเก็บไว้ในตัวแปร ซึ่งคุณจะเห็นสิ่งเหล่านี้ในโค้ดที่แสดง
- office.point : ตำแหน่งเครื่องหมาย
- office.name : ชื่อสำนักงานที่ใช้สำหรับป้ายกำกับเครื่องหมาย
- office.camera : ตำแหน่งกล้องเริ่มต้น
- office.pin : ตัวเลือก PinElement สำหรับความแตกต่างในการแสดงผล
และอย่าลืมดาวน์โหลดไฟล์ SVG หรือรูปภาพธงฝรั่งเศสด้วย
async function init() {
const { Map3DElement, MapMode, Marker3DInteractiveElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
...europeCamera,
mode: MapMode.SATELLITE,
});
officeLocations.forEach(office => {
const marker = new Marker3DInteractiveElement({
position: office.point,
label: office.name,
altitudeMode: 'ABSOLUTE',
extruded: true,
});
marker.addEventListener('gmp-click', (event) => {
map3D.flyCameraTo({
endCamera: office.camera,
durationMillis: 5000,
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraAround({
camera: office.camera,
durationMillis: 5000,
rounds: 1
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraTo({
endCamera: europeCamera,
durationMillis: 5000,
});
}, { once: true });
}, { once: true });
event.stopPropagation();
});
const markerPin = new PinElement(office.pin);
marker.append(markerPin);
map3D.append(marker);
});
document.body.append(map3D);
}
โปรดทราบว่ามีการเพิ่มฟังก์ชัน gmp-animationend รายการที่ 2 หลังภาพเคลื่อนไหว flyCameraAround เพื่อจัดการกับการบินกลับไปยังมุมมองยุโรป โดยใช้ตัวแปร europeCamera ที่เก็บไว้ ดังที่แสดงในภาพเคลื่อนไหว
ในขั้นตอนนี้ แอปพลิเคชันได้รับการขยายให้มี 2 สถานที่และความสามารถในการบินไปมาระหว่างสถานที่เหล่านั้นโดยใช้ภาพเคลื่อนไหวและอาร์เรย์สถานที่ ในขั้นตอนถัดไป ระบบจะเพิ่มสถานที่ตั้งสำนักงานที่เหลือลงในอาร์เรย์
โซลูชันของส่วน
ในขั้นตอนนี้ หน้าเว็บที่เสร็จสมบูรณ์จะแสดงเป็นโซลูชันเพื่อยืนยันการติดตั้งใช้งาน (หากคัดลอก โปรดตรวจสอบว่าคุณใช้คีย์ API ของคุณเอง)
และอย่าลืมว่าคุณต้องดาวน์โหลดไฟล์ SVG (หรือไฟล์ PNG ตามที่คุณต้องการ) ของธงแล้วจัดเก็บไว้ในไดเรกทอรีที่หน้าเว็บของคุณจะพบ (ในที่นี้จัดเก็บไว้ในโฟลเดอร์ images)
<!DOCTYPE html>
<html>
<head>
<title>Step 8 - Paris!</title>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<script>
(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: "<INSERT API KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map3D = null;
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const europeCamera = {
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
};
const officeLocations = [
{
"name": "Google France",
"camera": {
"center": { lat: 48.877276, lng: 2.329978, altitude: 48 },
"range": 178,
"tilt": 57.48,
"heading": -17,
},
"point": { lat: 48.8775183, lng: 2.3299791, altitude: 60 },
"pin": {
"background": 'white',
"glyph": new URL(base + '/images/fr.svg'),
"scale": 1.0,
},
},
{
"name": "Google UK",
"camera": {
"center": { lat: 51.5332, lng: -0.1260, altitude: 38.8 },
"range": 500,
"tilt": 56.21672368296945,
"heading": -31.15763027564165,
},
"point": { lat: 51.5332, lng: -0.1260, altitude: 75 },
"pin": {
"background": 'white',
"glyph": new URL(base + '/images/gb.svg'),
"scale": 1.0,
},
}]
async function init() {
const { Map3DElement, MapMode, Marker3DInteractiveElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
...europeCamera,
mode: MapMode.SATELLITE,
});
officeLocations.forEach(office => {
const marker = new Marker3DInteractiveElement({
position: office.point,
label: office.name,
altitudeMode: 'ABSOLUTE',
extruded: true,
});
marker.addEventListener('gmp-click', (event) => {
map3D.flyCameraTo({
endCamera: office.camera,
durationMillis: 5000,
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraAround({
camera: office.camera,
durationMillis: 5000,
rounds: 1
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraTo({
endCamera: europeCamera,
durationMillis: 5000,
});
}, { once: true });
}, { once: true });
event.stopPropagation();
});
const markerPin = new PinElement(office.pin);
marker.append(markerPin);
map3D.append(marker);
});
document.body.append(map3D);
}
init();
</script>
</body>
</html>
11. สถานที่เพิ่มเติม
แม้ว่าตอนนี้แอปพลิเคชันจะมีฟีเจอร์ที่จำเป็นทั้งหมดแล้ว แต่แผนที่ 3 มิติยังดูเบาบางอยู่ คุณจึงจะเพิ่มสถานที่อีก 2-3 แห่งเพื่อให้ดูน่าสนใจขึ้น การใช้อาร์เรย์ช่วยให้คุณป้อนข้อมูลสถานที่ใหม่ได้ง่ายๆ พร้อมเครื่องหมายที่ไม่ซ้ำกัน ขั้นตอนสุดท้ายคือเพิ่มเครื่องหมายต่อไปจนกว่าจะมีมุมมองต่อไปนี้
การเพิ่มเครื่องหมาย
Google มีสำนักงานหลายแห่งในหลายประเทศในยุโรป เราจึงขอเพิ่มสำนักงานบางส่วนลงในแผนที่ เพียงแค่อัปเดตอาร์เรย์ ซึ่งอาจมาจากเว็บเซอร์วิสหรือแสดงจากไฟล์แบบคงที่ที่ใดที่หนึ่ง ในกรณีของเรา เราจะเก็บไว้ในหน้าเดียวกันเพื่อความสะดวก
คุณสามารถเพิ่มเครื่องหมายได้มากเท่าที่ต้องการ ซึ่งหน้าเว็บจะเลือกเครื่องหมายเหล่านั้นแล้วเพิ่มลงในมุมมองโดยอัตโนมัติ อย่าลืมใช้ Flag ที่ถูกต้องและจัดเก็บไว้ในไดเรกทอรีรูปภาพ (หรือที่ใดก็ได้ที่สะดวก)
const officeLocations = [
{
name: "Google France",
camera: {
center: { lat: 48.877276, lng: 2.329978, altitude: 48 },
range: 178,
tilt: 57.48,
heading: -17,
},
point: { lat: 48.8775183, lng: 2.3299791, altitude: 60 },
pin: {
background: 'white',
glyph: new URL(base + '/images/fr.svg'),
scale: 1.0,
},
},
{
name: "Google UK",
camera: {
center: { lat: 51.5332, lng: -0.1260, altitude: 38.8 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 51.5332, lng: -0.1260, altitude: 75 },
pin: {
background: 'white',
glyph: new URL(base + '/images/gb.svg'),
scale: 1.0,
},
},
{
name: "Google Belgium",
camera: {
center: { lat: 50.83930408436509, lng: 4.38052394507952, altitude: 64.38932203802196},
range: 466.62899893119175,
tilt: 43.61569474716178,
heading: 51.805907046332074,
},
point: { lat: 50.8392653, lng: 4.3808751, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/be.svg'),
scale: 1.0,
},
},
{
name: "Google Czechia",
camera: {
center: {
lat: 50.07004093853976,
lng: 14.402871475443956,
altitude: 223.39574818495532
},
range: 522.0365799222782,
tilt: 62.39511972890614,
heading: -39.150149539328304,
},
point: { lat: 50.0703122, lng: 14.402668199999999, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/cz.svg'),
scale: 1.0,
},
},
{
name: "Google Denmark",
details: "2, Sankt Petri Passage 5, 1165 København",
camera: {
center: {
lat: 55.680359539635866,
lng: 12.570460204526002,
altitude: 30.447654757346044
},
range: 334.8786935049066,
tilt: 55.38819319004654,
heading: 149.63867461295067,
},
point: { lat: 55.6804504, lng: 12.570279099999999, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/dk.svg'),
scale: 1.0,
},
},
,
{
name: "Google Greece",
camera: {
center: {
lat: 38.038634694028055,
lng: 23.802924946201266,
altitude: 196.45884670344995
},
range: 343.57226336076565,
tilt: 54.97375927639567,
heading: -33.26775344055724,
},
point: { lat: 38.038619, lng: 23.8031622, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/gr.svg'),
scale: 1.0,
},
},
{
name: "Google Germany",
camera: {
center: {
lat: 53.55397683312404,
lng: 9.986350507286808,
altitude: 44.83610870143956
},
range: 375.3474077822466,
tilt: 71.35078443829818,
heading: -160.76930098951416,
},
point: { lat: 53.5540227, lng: 9.9863, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/de.svg'),
scale: 1.0,
},
},
{
name: "Google Ireland",
camera: {
center: { lat: 53.339816899999995, lng: -6.2362644, altitude: 38.777415761228006 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 53.339816899999995, lng: -6.2362644, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/ie.svg'),
scale: 1.0,
},
},
{
name: "Google Italy",
camera: {
center: {
lat: 45.486361346538224,
lng: 9.18995496294455,
altitude: 138.55834058400072
},
range: 694.9398023590038,
tilt: 57.822470255679114,
heading: 84.10194883488619,
},
point: { lat: 45.4863064, lng: 9.1894762, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/it.svg'),
scale: 1.0,
},
},
{
name: "Google Lithuania",
camera: {
center: {
lat: 54.698040606567965,
lng: 25.30965338542576,
altitude: 111.80276944294413
},
range: 412.5808304977545,
tilt: 43.50793332082195,
heading: -29.181098269421028,
},
point: { lat: 54.6981204, lng: 25.3098617, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/at.svg'),
scale: 1.0,
},
},
{
name: "Google Netherlands",
camera: {
center: {
lat: 52.33773837150874,
lng: 4.871754560171063,
altitude: 53.68063996154723
},
range: 473.1982259177312,
tilt: 56.216523350388634,
heading: 71.78252318033718,
},
point: { lat: 52.337801, lng: 4.872065999999999, altitude: 100 },
pin: {
background: 'white',
glyph: new URL(base + '/images/nl.svg'),
scale: 1.0,
},
},
{
name: "Google Norway",
camera: {
center: { lat: 59.90991209999999, lng: 10.726020799999999, altitude: 38.777415761228006 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 59.90991209999999, lng: 10.726020799999999, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/no.svg'),
scale: 1.0,
},
},
{
name: "Google Poland",
camera: {
center: { lat: 52.22844380000001, lng: 20.9851819, altitude: 38.777415761228006 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 52.22844380000001, lng: 20.9851819, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/pl.svg'),
scale: 1.0,
},
},
{
name: "Google Portugal",
camera: {
center: {
lat: 38.7240122810727,
lng: -9.150628263172639,
altitude: 55.299662291551044
},
range: 337.7474313328639,
tilt: 56.79772652682846,
heading: 176.0722118222208,
},
point: { lat: 38.723915999999996, lng: -9.150629, altitude: 35 },
pin: {
background: 'white',
glyph: new URL(base + '/images/pt.svg'),
scale: 1.0,
},
},
{
name: "Google Romania",
camera: {
center: {
lat: 44.43076650172983,
lng: 26.109700164718586,
altitude: 125.57895810814505
},
range: 364.25249956711923,
tilt: 38.517539223834326,
heading: -38.81294924429363,
},
point: { lat: 44.4309897, lng: 26.1095719, altitude: 75 },
pin: {
background: 'white',
glyph: new URL(base + '/images/ro.svg'),
scale: 1.0,
},
},
{
name: "Google Spain",
camera: {
center: {
lat: 40.450078762608875,
lng: -3.6930085080020856,
altitude: 753.6446342341894
},
range: 845.7279793010093,
tilt: 46.752510050599746,
heading: 4.718779524265234,
},
point: { lat: 40.450294199999995, lng: -3.6927915, altitude: 175 },
pin: {
background: 'white',
glyph: new URL(base + '/images/es.svg'),
scale: 1.0,
},
},
{
name: "Google Sweden",
camera: {
center: {
lat: 59.33313751316038,
lng: 18.054618219238293,
altitude: 16.728213706832868
},
range: 377.5210725830039,
tilt: 63.59478230626709,
heading: 98.53138488367703,
},
point: { lat: 59.3332093, lng: 18.0536386, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/se.svg'),
scale: 1.0,
},
},
{
name: "Google Switzerland",
camera: {
center: {
lat: 47.365411056285275,
lng: 8.525063594405356,
altitude: 419.2348376754488
},
range: 166.74918737631742,
tilt: 59.31431457129067,
heading: -32.620415961949206,
},
point: { lat: 47.365452, lng: 8.5249253, altitude: 100 },
pin: {
background: 'white',
glyph: new URL(base + '/images/ch.svg'),
scale: 1.0,
},
}
]
เมื่อดำเนินการเสร็จแล้ว คุณควรเห็นหน้าเว็บที่สมบูรณ์ดังรูปภาพ ซึ่งช่วยให้ผู้ใช้คลิกสถานที่ใดก็ได้ แล้วบินไปยังสถานที่นั้นและรอบๆ สถานที่นั้น จากนั้นจึงกลับออกมา
ยินดีด้วย คุณทำ Codelab เสร็จแล้ว มาสรุปกันในส่วนถัดไปและลองสิ่งใหม่ๆ กัน
โซลูชันของส่วน
ในขั้นตอนนี้ หน้าเว็บที่เสร็จสมบูรณ์จะแสดงเป็นโซลูชันเพื่อยืนยันการติดตั้งใช้งาน (หากคัดลอก โปรดตรวจสอบว่าคุณใช้คีย์ API ของคุณเอง)
และอย่าลืมว่าคุณต้องดาวน์โหลดไฟล์ SVG (หรือไฟล์ PNG ตามที่คุณต้องการ) ของธงแล้วจัดเก็บไว้ในไดเรกทอรีที่หน้าเว็บของคุณจะพบ (ในที่นี้จัดเก็บไว้ในโฟลเดอร์ images)
<!DOCTYPE html>
<html>
<head>
<title>Step 9 - More Places!</title>
<style>
body {
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
<script>
(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: "<INSERT API KEY>",
v: "alpha",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script>
let map3D = null;
const base = document.location.href.substr(0, document.location.href.lastIndexOf("/"));
const europeCamera = {
center: { lat: 46.717, lng: 7.075, altitude: 2175.130 },
range: 5814650,
tilt: 33,
heading: 4.36,
};
const officeLocations = [
{
name: "Google France",
details: "8 Rue de Londres, 75009 Paris, France",
camera: {
center: { lat: 48.877276, lng: 2.329978, altitude: 48 },
range: 178,
tilt: 57.48,
heading: -17,
},
point: { lat: 48.8775183, lng: 2.3299791, altitude: 60 },
pin: {
background: 'white',
glyph: new URL(base + '/images/fr.svg'),
scale: 1.0,
},
},
{
name: "Google UK",
details: "6 Pancras Square, London N1C 4AG, UK",
camera: {
center: { lat: 51.5332, lng: -0.1260, altitude: 38.8 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 51.5332, lng: -0.1260, altitude: 75 },
pin: {
background: 'white',
glyph: new URL(base + '/images/gb.svg'),
scale: 1.0,
},
},
{
name: "Google Belgium",
details: "Chau. d'Etterbeek 180, 1040 Brussel",
camera: {
center: { lat: 50.83930408436509, lng: 4.38052394507952, altitude: 64.38932203802196},
range: 466.62899893119175,
tilt: 43.61569474716178,
heading: 51.805907046332074,
},
point: { lat: 50.8392653, lng: 4.3808751, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/be.svg'),
scale: 1.0,
},
},
{
name: "Google Czechia",
details: "Stroupežnického 3191/17, 150 00 Praha 5-Smíchov",
camera: {
center: {
lat: 50.07004093853976,
lng: 14.402871475443956,
altitude: 223.39574818495532
},
range: 522.0365799222782,
tilt: 62.39511972890614,
heading: -39.150149539328304,
},
point: { lat: 50.0703122, lng: 14.402668199999999, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/cz.svg'),
scale: 1.0,
},
},
{
name: "Google Denmark",
details: "2, Sankt Petri Passage 5, 1165 København",
camera: {
center: {
lat: 55.680359539635866,
lng: 12.570460204526002,
altitude: 30.447654757346044
},
range: 334.8786935049066,
tilt: 55.38819319004654,
heading: 149.63867461295067,
},
point: { lat: 55.6804504, lng: 12.570279099999999, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/dk.svg'),
scale: 1.0,
},
},
,
{
name: "Google Greece",
details: "Fragkokklisias 6, Athina 151 25",
camera: {
center: {
lat: 38.038634694028055,
lng: 23.802924946201266,
altitude: 196.45884670344995
},
range: 343.57226336076565,
tilt: 54.97375927639567,
heading: -33.26775344055724,
},
point: { lat: 38.038619, lng: 23.8031622, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/gr.svg'),
scale: 1.0,
},
},
{
name: "Google Germany",
details: "ABC-Straße 19, 20354 Hamburg",
camera: {
center: {
lat: 53.55397683312404,
lng: 9.986350507286808,
altitude: 44.83610870143956
},
range: 375.3474077822466,
tilt: 71.35078443829818,
heading: -160.76930098951416,
},
point: { lat: 53.5540227, lng: 9.9863, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/de.svg'),
scale: 1.0,
},
},
{
name: "Google Ireland",
details: "Gordon House, 4 Barrow St, Grand Canal Dock, Dublin 4, D04 V4X7",
camera: {
center: { lat: 53.339816899999995, lng: -6.2362644, altitude: 38.777415761228006 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 53.339816899999995, lng: -6.2362644, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/ie.svg'),
scale: 1.0,
},
},
{
name: "Google Italy",
details: "Isola Building C, Via Federico Confalonieri, 4, 20124 Milano",
camera: {
center: {
lat: 45.486361346538224,
lng: 9.18995496294455,
altitude: 138.55834058400072
},
range: 694.9398023590038,
tilt: 57.822470255679114,
heading: 84.10194883488619,
},
point: { lat: 45.4863064, lng: 9.1894762, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/it.svg'),
scale: 1.0,
},
},
{
name: "Google Lithuania",
details: "Vilnius Tech Park, Antakalnis st. 17, 2nd building, LT-10312, Vilnius",
camera: {
center: {
lat: 54.698040606567965,
lng: 25.30965338542576,
altitude: 111.80276944294413
},
range: 412.5808304977545,
tilt: 43.50793332082195,
heading: -29.181098269421028,
},
point: { lat: 54.6981204, lng: 25.3098617, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/at.svg'),
scale: 1.0,
},
},
{
name: "Google Netherlands",
details: "Claude Debussylaan 34, 1082 MD Amsterdam",
camera: {
center: {
lat: 52.33773837150874,
lng: 4.871754560171063,
altitude: 53.68063996154723
},
range: 473.1982259177312,
tilt: 56.216523350388634,
heading: 71.78252318033718,
},
point: { lat: 52.337801, lng: 4.872065999999999, altitude: 100 },
pin: {
background: 'white',
glyph: new URL(base + '/images/nl.svg'),
scale: 1.0,
},
},
{
name: "Google Norway",
details: "Bryggegata 6, 0250 Oslo",
camera: {
center: { lat: 59.90991209999999, lng: 10.726020799999999, altitude: 38.777415761228006 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 59.90991209999999, lng: 10.726020799999999, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/no.svg'),
scale: 1.0,
},
},
{
name: "Google Poland",
details: "Rondo Daszynskiego 2, 00-843 Warsaw",
camera: {
center: { lat: 52.22844380000001, lng: 20.9851819, altitude: 38.777415761228006 },
range: 500,
tilt: 56.21672368296945,
heading: -31.15763027564165,
},
point: { lat: 52.22844380000001, lng: 20.9851819, altitude: 25 },
pin: {
background: 'white',
glyph: new URL(base + '/images/pl.svg'),
scale: 1.0,
},
},
{
name: "Google Portugal",
details: "R. Duque de Palmela 37 Piso 4, 1250-097 Lisboa",
camera: {
center: {
lat: 38.7240122810727,
lng: -9.150628263172639,
altitude: 55.299662291551044
},
range: 337.7474313328639,
tilt: 56.79772652682846,
heading: 176.0722118222208,
},
point: { lat: 38.723915999999996, lng: -9.150629, altitude: 35 },
pin: {
background: 'white',
glyph: new URL(base + '/images/pt.svg'),
scale: 1.0,
},
},
{
name: "Google Romania",
details: "Bulevardul Corneliu Coposu 6-8, București 030167",
camera: {
center: {
lat: 44.43076650172983,
lng: 26.109700164718586,
altitude: 125.57895810814505
},
range: 364.25249956711923,
tilt: 38.517539223834326,
heading: -38.81294924429363,
},
point: { lat: 44.4309897, lng: 26.1095719, altitude: 75 },
pin: {
background: 'white',
glyph: new URL(base + '/images/ro.svg'),
scale: 1.0,
},
},
{
name: "Google Spain",
details: "Torre Picasso, Pl. Pablo Ruiz Picasso, 1, Tetuán, 28020 Madrid",
camera: {
center: {
lat: 40.450078762608875,
lng: -3.6930085080020856,
altitude: 753.6446342341894
},
range: 845.7279793010093,
tilt: 46.752510050599746,
heading: 4.718779524265234,
},
point: { lat: 40.450294199999995, lng: -3.6927915, altitude: 175 },
pin: {
background: 'white',
glyph: new URL(base + '/images/es.svg'),
scale: 1.0,
},
},
{
name: "Google Sweden",
details: "Kungsbron 2, 111 22 Stockholm",
camera: {
center: {
lat: 59.33313751316038,
lng: 18.054618219238293,
altitude: 16.728213706832868
},
range: 377.5210725830039,
tilt: 63.59478230626709,
heading: 98.53138488367703,
},
point: { lat: 59.3332093, lng: 18.0536386, altitude: 50 },
pin: {
background: 'white',
glyph: new URL(base + '/images/se.svg'),
scale: 1.0,
},
},
{
name: "Google Switzerland",
details: "Brandschenkestrasse 110, 8002 Zürich",
camera: {
center: {
lat: 47.365411056285275,
lng: 8.525063594405356,
altitude: 419.2348376754488
},
range: 166.74918737631742,
tilt: 59.31431457129067,
heading: -32.620415961949206,
},
point: { lat: 47.365452, lng: 8.5249253, altitude: 100 },
pin: {
background: 'white',
glyph: new URL(base + '/images/ch.svg'),
scale: 1.0,
},
}
]
async function init() {
const { Map3DElement, MapMode, Marker3DInteractiveElement } = await google.maps.importLibrary("maps3d");
const { PinElement } = await google.maps.importLibrary('marker');
map3D = new Map3DElement({
...europeCamera,
mode: MapMode.SATELLITE,
});
officeLocations.forEach(office => {
const marker = new Marker3DInteractiveElement({
position: office.point,
label: office.name,
altitudeMode: 'RELATIVE_TO_GROUND',
extruded: true,
});
marker.addEventListener('gmp-click', (event) => {
map3D.flyCameraTo({
endCamera: office.camera,
durationMillis: 2000,
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraAround({
camera: office.camera,
durationMillis: 2000,
rounds: 1
});
map3D.addEventListener('gmp-animationend', () => {
map3D.flyCameraTo({
endCamera: europeCamera,
durationMillis: 2000,
});
}, { once: true });
}, { once: true });
event.stopPropagation();
});
const markerPin = new PinElement(office.pin);
marker.append(markerPin);
map3D.append(marker);
});
document.body.append(map3D);
}
init();
</script>
</body>
</html>
12. ขั้นตอนถัดไป
ใน Codelab นี้ คุณได้เรียนรู้ข้อมูลเบื้องต้นเกี่ยวกับสิ่งที่คุณทําได้โดยใช้ 3 มิติใน Maps JavaScript API ถัดไป ให้ลองเพิ่มองค์ประกอบต่อไปนี้ลงในแผนที่
- เพิ่มรายการแบบเลื่อนลงเพื่อให้เลือกสำนักงานได้
- ใช้ตัวเลือกการจัดสไตล์เครื่องหมายอื่นๆ เพื่อแสดงแสงแฟลร์เพิ่มเติม
- โปรดดูคลังเพิ่มเติมที่ใช้ได้กับ Maps JavaScript API ซึ่งเปิดใช้ฟีเจอร์เพิ่มเติม เช่น สถานที่เพื่อแสดงคะแนนของสำนักงานแต่ละแห่งโดยใช้รหัสสถานที่
หากต้องการดูวิธีอื่นๆ เพิ่มเติมในการใช้งาน Google Maps Platform และ 3 มิติบนเว็บ ให้ไปที่ลิงก์ต่อไปนี้