Places UI Kit: ไลบรารีที่พร้อมใช้งานซึ่งช่วยให้นักพัฒนาซอฟต์แวร์ปรับแต่งและควบคุมได้ ลองใช้ดู แล้วแชร์ความคิดเห็นเกี่ยวกับประสบการณ์การใช้ UI Kit

Google ใช้เทคโนโลยี AI เพื่อแปลเนื้อหาเป็นภาษาที่คุณต้องการ การแปลโดย AI อาจมีข้อผิดพลาด

แนวทางปฏิบัติแนะนำสำหรับแผนที่ 3 มิติ

คู่มือนี้จะอธิบายรายละเอียดเกี่ยวกับคอมโพเนนต์เว็บของ 3D Maps และข้อควรพิจารณาเมื่อผสานรวมกับแอปพลิเคชันของคุณ

ตัวอย่างกรณีการใช้งานสำหรับการค้นหาสถานที่และการค้นหาเส้นทาง — ตัวอย่างการค้นหาสถานที่และเส้นทาง

ข้อควรพิจารณาเกี่ยวกับประสิทธิภาพ

พิจารณาแนวทางต่อไปนี้เพื่อให้มั่นใจว่าการโต้ตอบและองค์ประกอบภาพจะราบรื่นและตอบสนองได้ดี

โหลดแผนที่

การตั้งค่าการโหลดและการแสดงผลเริ่มต้นของแผนที่ 3 มิติจะรวมเทคนิคการกำหนดค่าเบราว์เซอร์และแนวทางปฏิบัติแนะนำสำหรับ UI เพื่อประสบการณ์ของผู้ใช้ที่ดีที่สุด

การโหลด API: ใช้การโหลดแบบไดนามิกที่ไม่พร้อมกันของแผนที่ 3 มิติเพื่อโหลด Maps JavaScript API ในการโหลดหน้าเว็บครั้งแรก
ไลบรารี: โหลดไลบรารีแบบเป็นโปรแกรมเมื่อจำเป็น เช่น google.maps.importLibrary("maps3d") หรือหากคุณใช้คอมโพเนนต์เว็บ เช่น <gmp-map-3d> ในหน้า HTML โดยตรงด้วยการโหลดสคริปต์โดยตรง ไลบรารีจะโหลดโดยอัตโนมัติในเวลาที่เหมาะสม
จัดการฟีเจอร์แผนที่ฐาน: ใช้ mapId ที่กำหนดเองเพื่อกรองจุดที่น่าสนใจในแผนที่ฐาน (โหมด HYBRID) และควบคุมความหนาแน่นของจุดที่น่าสนใจ โดยเฉพาะอย่างยิ่งหากแอปพลิเคชันมีชุดองค์ประกอบที่กำหนดเอง เช่น เครื่องหมายหรือเส้นประกอบ ซึ่งจะช่วยป้องกันไม่ให้ภาพดูรกและอาจทับซ้อนกัน หรือจะปิดใช้ฟีเจอร์ไทล์เวกเตอร์ของแผนที่ฐาน เช่น POI, เส้นประกอบของถนน, ชื่อถนน, ชื่อถนน (โหมดดาวเทียม) ก็ได้
เหตุการณ์: ฟังเหตุการณ์ gmp-steadystate หรือ gmp-error เพื่อสร้างตรรกะที่ตามมา เช่น การโหลดเครื่องหมาย การสร้างภาพเคลื่อนไหวของกล้อง

ลำดับการโหลดแผนที่ — Canvas พื้นหลัง > ไทล์ที่ลดขนาด > เมชภูมิประเทศ > เมชพื้นผิว (เช่น อาคาร) > จุดที่น่าสนใจและป้ายกำกับถนน องค์ประกอบที่กำหนดเองที่โหลดพร้อมกัน (เครื่องหมาย โมเดล 3 มิติ ฯลฯ)

การโต้ตอบของผู้ใช้: รอเหตุการณ์ gmp-steadystate ก่อนทำการเปลี่ยนแปลงเนื้อหาของแผนที่ หากผู้ใช้เริ่มโต้ตอบ (เลื่อน ซูม) กับแผนที่ก่อนเหตุการณ์ gmp-steadystate เริ่มต้น เหตุการณ์จะทริกเกอร์หลังจากที่ผู้ใช้หยุดโต้ตอบเท่านั้น หลีกเลี่ยงการแสดงหรืออัปเดตเนื้อหาการวางซ้อน (เช่น เครื่องหมายหรือรูปหลายเหลี่ยม) ขณะที่ผู้ใช้เลื่อนหรือซูมแผนที่ หลีกเลี่ยงการแสดงหรืออัปเดตเนื้อหาการวางซ้อน (เช่น เครื่องหมายหรือรูปหลายเหลี่ยม) โดยการฟัง gmp-centerchange, gmp-headingchange gmp-rangechange gmp-rollchange gmp-tiltchange
ใช้ requestAnimationFrame() (rAF) สำหรับการอัปเดตอย่างต่อเนื่องและแยกการคำนวณที่ใช้ทรัพยากรมากออกจากคำสั่งประมวลผลอย่างเคร่งครัด
- ใช้ rAF: ซิงค์การอัปเดตกับอัตราการแสดงผลของเบราว์เซอร์เพื่อให้ภาพเคลื่อนไหว 60 FPS ที่ราบรื่นและลดการใช้พลังงาน
- หลีกเลี่ยงการทำงานวาดที่ใช้ทรัพยากรมาก: อย่าทำงานหนักที่ไม่ใช่การวาดในระหว่างการอัปเดตครั้งสุดท้าย
- แยกตรรกะ: ดำเนินการตรรกะที่ใช้ทรัพยากรมากทั้งหมดก่อนการเรียกใช้การอัปเดตคอมโพเนนต์เว็บขั้นต่ำภายในลูป rAF
การตั้งค่าฉากเริ่มต้น: <gmp-map-3d> การตั้งค่ากล้อง เช่น การเอียง จะส่งผลต่อความเร็วในการโหลด ยิ่งซูมหรือเอียงฉากมากเท่าใด รูปหลายเหลี่ยมที่มีรายละเอียดมากขึ้นก็จะแสดงและต้องโหลดมากขึ้นเท่านั้น ระดับรายละเอียดจะขึ้นอยู่กับสถานที่ด้วย (เช่น เมืองที่มีอาคารจำนวนมากเทียบกับชนบทที่มีเฉพาะลักษณะทางธรรมชาติ)
- ต้องการมุมมองที่ซูมเข้าน้อย (ระดับความสูงมาก) และมุมมองที่เอียงเล็กน้อยหรือไม่เอียงเลย
- เพิ่มขอบเขต (ตัวอย่าง) ลงในแผนที่เพื่อให้ผู้ใช้มุ่งเน้นที่พื้นที่หนึ่งๆ และชิ้นส่วนแผนที่โหลดได้อย่างสมบูรณ์
ภาพพรีโหลดเดอร์: แม้ว่า <gmp-map-3d> จะโหลดเร็วมาก แต่ก็อาจใช้เวลาสักพักในการแสดงผลแบบความละเอียดเต็มสำหรับผู้ใช้ที่มีอุปกรณ์ระดับล่าง (GPU ต่ำ) หรือแบนด์วิดท์ต่ำ (4G ช้า) ในกรณีนี้ คุณสามารถสร้างตัวโหลดล่วงหน้าที่มีรูปภาพ ภาพเคลื่อนไหว หรือข้อความที่มีการโหลดฉาก 3 มิติในเบื้องหลัง ดูเหตุการณ์สำคัญที่ควรใช้ด้านล่าง

ตัวอย่างตัวโหลดล่วงหน้า — ตัวอย่าง Preloader

// create the map in the background and wait for gmp-steadystate event
async function initMap() {
    await google.maps.importLibrary("maps3d");
    const map = document.querySelector('gmp-map-3d');
    const div = document.querySelector('div'); // preloader "
    map.addEventListener('gmp-steadystate', ({isSteady}) => {
        if (isSteady) {
            div.style.display = 'none';
        }
    });
}
initMap();

แผนที่ 2 มิติ:
- ระบบจะแสดงแผนที่ 2 มิติ (SATELLITE) เป็นทางเลือกให้แก่ผู้ใช้เหล่านี้โดยที่ยังคงรวมข้อมูลทางภูมิศาสตร์ เช่น เครื่องหมาย

หรือจะแสดงแผนที่แบบคงที่ 2 มิติเสริมในโหมดดาวเทียมเพื่อให้ผู้ใช้เห็นภาพสถานที่หนึ่งๆ ขณะโหลดก็ได้

ประสิทธิภาพและการจัดการองค์ประกอบที่มองเห็น

แผนที่ 3 มิติมีวิธีแสดงองค์ประกอบภาพหลายวิธี เช่น เครื่องหมาย เส้นประกอบ เส้นประกอบ และโมเดล 3 มิติ โดยมีประสิทธิภาพสูงสุดและใช้เวลาในการแสดงผลน้อยที่สุด แม้จะเป็นภาพที่มีปริมาณมากก็ตาม

เครื่องหมาย

ตัวเลือกการปรับแต่งที่เหมาะสมที่สุด
- PinElement: สำหรับการเปลี่ยนแปลงเครื่องหมายพื้นฐาน (สี ขนาด ขอบ สัญลักษณ์ข้อความ) ให้ใช้องค์ประกอบ <gmp-pin> หรือคลาส PinElement ซึ่งเป็นวิธีการปรับแต่งที่มีประสิทธิภาพมากที่สุด
- ใช้ HTMLImageElement หรือ SVGElement Markers เท่าที่จำเป็น: ใช้เพื่อการปรับแต่งเพิ่มเติม เช่น การเพิ่มความโปร่งใสหรือการแทรกรูปภาพ เช่น ไอคอน ลงใน SVGElement (ต้องใช้การเข้ารหัส base64) ระบบจะแรสเตอร์รูปภาพเหล่านี้เมื่อโหลดและทำให้เกิดโอเวอร์เฮดด้านประสิทธิภาพ ต้องรวม HTMLImageElement และ SVGElement ไว้ในองค์ประกอบ <template> ก่อนกำหนดให้กับช่องเริ่มต้นของ Marker3DElement
- การเพิ่ม HTML หรือ CSS ธรรมดายังไม่พร้อมให้บริการในขณะนี้
จัดการการดำเนินการสำหรับการซ้อนทับ: ใช้ประโยชน์จากพร็อพเพอร์ตี้ collisionBehavior ของเครื่องหมาย สำหรับเครื่องหมายสำคัญที่ต้องมองเห็นได้เสมอ ให้ตั้งค่าลักษณะการทำงานตามความเหมาะสม สำหรับเครื่องหมายที่มีความสำคัญน้อยกว่า ให้ซ่อนไว้เพื่อรักษาประสบการณ์การใช้งานแผนที่ที่สะอาดตาและไม่รกจนเกินไป โดยเฉพาะที่ระดับการซูมสูง
POI ที่สำคัญเท่านั้น: ใช้ drawsWhenOccluded (หรือตั้งค่าพร็อพเพอร์ตี้แบบเป็นโปรแกรม) สำหรับเครื่องหมายที่ต้องมองเห็นผ่านอาคารหรือภูมิประเทศเท่านั้น (เช่น เป้าหมายการช่วยเหลือ สายสาธารณูปโภคที่ฝังอยู่ หรืออวาตาร์ของผู้ใช้)
ทดสอบการบดบัง: เนื่องจากแผนที่เป็นแบบ 3 มิติ เครื่องหมายจึงอาจถูกบดบัง (บดบัง) ด้วยอาคารหรือภูมิประเทศได้ ทดสอบมุมกล้องและระดับความสูงของเครื่องหมายที่แตกต่างกันเพื่อให้แน่ใจว่า POI ที่สำคัญยังคงมองเห็นได้ หรือใช้ตรรกะเพื่อปรับระดับการมองเห็นและระดับความสูงเมื่อถูกบดบัง
ใช้ประโยชน์จากระดับความสูง: ในแผนที่ 3 มิติ เครื่องหมายควรใช้ตำแหน่งที่มีค่าระดับความสูง สำหรับเครื่องหมายที่เชื่อมโยงกับภูมิประเทศหรืออาคาร ให้ใช้ altitudeMode: 'RELATIVE_TO_GROUND', 'RELATIVE_TO_MESH' หรือการตั้งค่าที่คล้ายกัน เพื่อให้แน่ใจว่าเครื่องหมายยึดตำแหน่งอย่างถูกต้องเมื่อแผนที่เอียงหรือหมุน

รูปหลายเหลี่ยมและเส้นประกอบ

ตัวอย่างการโหลดรูปหลายเหลี่ยม — ตัวอย่างสถานการณ์: 100-150 มิลลิวินาทีในการโหลดรูปหลายเหลี่ยม 1,000 รูป (แล็ปท็อปสมัยใหม่: macOS M3 Pro, Chrome)

ลดความซับซ้อนของเรขาคณิต: ก่อนแสดงผล ให้ใช้อัลกอริทึมการลดความซับซ้อนกับข้อมูลเส้นทาง ซึ่งจะช่วยลดจำนวนจุดยอดมุมในขณะที่ยังคงรูปร่างทั่วไปไว้ ซึ่งจะช่วยปรับปรุงความเร็วในการแสดงผลได้อย่างมาก โดยเฉพาะอย่างยิ่งสำหรับขอบเขตหรือเส้นทางที่ซับซ้อน
การลดขนาดตามระดับการซูม: สำหรับชุดข้อมูลขนาดใหญ่มาก ให้พิจารณาโหลดเรขาคณิตที่มีรายละเอียดสูงขึ้นเฉพาะเมื่อผู้ใช้ซูมเข้าในพื้นที่เท่านั้น ที่ระดับการซูมต่ำ คุณจำเป็นต้องใช้เฉพาะเส้นประกอบหรือรูปหลายเหลี่ยมเวอร์ชันที่เรียบง่ายมากเท่านั้น
คำนวณล่วงหน้าสำหรับรูปหลายเหลี่ยมที่ยื่นออกมา: หากรูปหลายเหลี่ยมยื่นออกมา (extruded: true) ข้อมูลเส้นทางจะกำหนดปริมาตร 3 มิติ (Mesh) การประมวลผลรูปหลายเหลี่ยมที่มีจุดยอดสูงและซับซ้อนนั้นต้องใช้ทรัพยากรในการประมวลผลสูง ตรวจสอบว่าข้อมูลต้นฉบับสำหรับรูปหลายเหลี่ยมนั้นเรียบง่ายที่สุดเท่าที่จะเป็นไปได้
ทดสอบประสิทธิภาพของเส้นประกอบและรูปหลายเหลี่ยม: เมื่อเพิ่มเส้นประกอบ/รูปหลายเหลี่ยมจำนวนมากหรือซับซ้อน โดยเฉพาะเมื่ออัดรีดสำหรับ 3 มิติ ให้ตรวจสอบว่าไม่ทำให้อัตราเฟรมลดลง จำกัดจำนวนจุดยอดหรือใช้อัลกอริทึมการลดความซับซ้อนหากจำเป็น
เมื่ออัปเดตรูปร่าง ให้แก้ไขอาร์เรย์เส้นทางทั้งหมดในการดำเนินการเดียว แทนที่จะวนซ้ำและแก้ไของค์ประกอบแต่ละรายการ การดำเนินการกำหนดค่าเดียว (เช่น polyline.path = newPathArray;) มีประสิทธิภาพมากกว่าการอัปเดตซ้ำหลายครั้งมาก
หลีกเลี่ยงเส้นประกอบที่ยื่นออกมา (หากเป็นไปได้): แม้ว่าเส้นประกอบจะใช้ค่าระดับความสูงเพื่อวางในพื้นที่ 3 มิติได้ แต่การยื่นเส้นประกอบออกมา (เช่น การกำหนดความกว้างของเส้นขอบและช่วงระดับความสูงที่กว้าง) อาจใช้ทรัพยากรกราฟิกมาก เมื่อเป็นไปได้ ให้ใช้เส้นประกอบ 2 มิติบนพื้น (RELATIVE_TO_GROUND) หรือความกว้างของเส้นขีดต่ำสุดเพื่อประสิทธิภาพที่ดีขึ้น
ใช้ drawsOccludedSegments สำหรับองค์ประกอบการกำหนดเส้นทางที่สำคัญเท่านั้น สำหรับรูปร่างพื้นหลังหรือรูปร่างตามบริบท ให้ปล่อยให้รูปร่างเหล่านั้นถูกบดบังโดยรูปทรงเรขาคณิต 3 มิติของแผนที่อย่างเป็นธรรมชาติ การแสดงเรขาคณิตที่ซ่อนอยู่ซึ่งไม่สำคัญจะเพิ่มความซับซ้อนในการแสดงผลโดยไม่จำเป็น

โมเดล 3 มิติ

การแสดงผลและการโต้ตอบของโมเดล 3 มิติ .glb เช่น เหตุการณ์ gmp-click จะทำงานเร็วมากใน <gmp-map-3d>

ลดขนาดไฟล์ด้วยการบีบอัด: เพื่อให้โหลดได้อย่างรวดเร็ว โดยเฉพาะในเครือข่ายมือถือ ให้เก็บไฟล์โมเดล .glb ที่ซับซ้อนไว้ที่ขนาดไม่เกิน 5 MB (ยิ่งน้อยยิ่งดี) วิธีหลักในการดำเนินการนี้คือการใช้การบีบอัด Draco กับข้อมูล Mesh ภายในไฟล์ .glb ซึ่งจะช่วยลดขนาดไฟล์ได้อย่างมาก (มักจะมากกว่า 50%) โดยสูญเสียคุณภาพของภาพน้อยที่สุด
จุดเริ่มต้นของโมเดลอยู่ตรงกลาง: ตรวจสอบว่าซอฟต์แวร์การสร้างโมเดล 3 มิติส่งออกโมเดลโดยมีจุดเริ่มต้น (จุด 0, 0, 0) อยู่ตรงกลางฐานของโมเดล วิธีนี้ช่วยให้การจัดตำแหน่งและการหมุนบนแผนที่ง่ายขึ้น ซึ่งช่วยให้โมเดลยึดกับพิกัดละติจูดและลองจิจูดได้อย่างถูกต้อง
จัดการ CORS: หากไฟล์โมเดลโฮสต์อยู่ในโดเมนหรือ CDN อื่นที่ไม่ใช่เว็บแอปพลิเคชัน คุณต้องกำหนดค่าเซิร์ฟเวอร์โฮสติ้งให้รวมส่วนหัวการแชร์ทรัพยากรแบบข้ามต้นทาง (CORS) ที่จำเป็น (เช่น Access-Control-Allow-Origin: *) ไม่เช่นนั้นแผนที่จะโหลดโมเดลไม่ได้