ปรับแต่งแผนที่ 3 มิติ

คุณสามารถปรับแต่งรูปลักษณ์ของแผนที่ฐาน 3 มิติได้โดยใช้การจัดรูปแบบแผนที่ในระบบคลาวด์

การจัดรูปแบบแผนที่ในระบบคลาวด์ช่วยให้คุณควบคุมรูปลักษณ์ของแผนที่ที่จะแสดงต่อผู้ใช้ได้ โดยการควบคุมฟีเจอร์ต่างๆ เช่น ความหนาแน่นของจุดที่น่าสนใจ การนำหมวดหมู่จุดที่น่าสนใจบางหมวดหมู่ออก และการแก้ไขสีเติมหรือเส้นขอบของฟีเจอร์ คุณจะสร้างประสบการณ์การใช้แผนที่ที่ปรับให้เหมาะกับผู้ใช้ได้

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

ตัวอย่างต่อไปนี้แสดงแผนที่ที่ใช้สไตล์ที่กำหนดเองเพื่อเปลี่ยนสีของไอคอนและข้อความของฟีเจอร์สันทนาการเป็นสีส้ม

async function init() {
    const { Map3DElement } = await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: {
            lat: 37.75183154601466,
            lng: -119.52369070507672,
            altitude: 2200,
        },
        tilt: 67.5,
        heading: 108.94057782079429,
        range: 6605.57279990986,
        mapId: 'bcce776b92de1336e22c569f', // Styles are associated with map IDs.
        mode: 'HYBRID',
    });

    document.body.append(map);
}

void init();

ภาพรวม

กระบวนการปรับแต่งแผนที่ 3 มิติโดยใช้การจัดรูปแบบแผนที่ในระบบคลาวด์จะเหมือนกับแผนที่ 2 มิติ ดังนี้

1 สร้างรหัสแผนที่ สร้างรหัสแผนที่ ระบบจะส่งรหัสแผนที่ไปยังแอปพลิเคชันเพื่อจัดการการจัดรูปแบบ คุณจะเชื่อมโยงสไตล์ที่กำหนดเองกับรหัสแผนที่นี้ในขั้นตอนต่อๆ ไป
2 สร้างสไตล์แผนที่ในระบบคลาวด์ คุณต้องเลือก "ไฮบริด 3 มิติ" และใช้ "โหมดสว่าง" ในขั้นตอนนี้
3 เชื่อมโยงสไตล์แผนที่กับแผนที่ ลิงก์สไตล์ กับรหัสแผนที่ที่คุณสร้างในขั้นตอนที่ 1
4 เพิ่มรหัสแผนที่ลงในแอปพลิเคชัน ระบุรหัสแผนที่ในโค้ดโดยใช้พารามิเตอร์ map-id
5 เผยแพร่รหัสแผนที่ โปรดทราบว่าระบบจะรวมการเปลี่ยนแปลงสไตล์ที่กำหนดเองเข้ากับแอปพลิเคชันโดยอัตโนมัติหลังจากเผยแพร่

หากต้องการดูข้อมูลเชิงลึกเกี่ยวกับการสร้างสไตล์แผนที่ โปรดอ่านหัวข้อ สร้างและใช้ สไตล์แผนที่

อัปเดตรหัสแผนที่แบบไดนามิก

คุณสามารถอัปเดตพร็อพเพอร์ตี้ mapId แบบไดนามิกหลังจากสร้างอินสแตนซ์ของแผนที่แล้ว ซึ่งจะช่วยให้คุณใช้สไตล์แผนที่ในระบบคลาวด์แบบอื่นได้โดยไม่ต้องสร้างอินสแตนซ์ Map3DElement ทั้งหมดขึ้นมาใหม่

หากต้องการอัปเดตรหัสแผนที่ ให้ตั้งค่าพร็อพเพอร์ตี้ mapId ในอินสแตนซ์ Map3DElement ดังนี้

const map3DElement = document.querySelector('gmp-map-3d');

// Update the map ID dynamically
map3DElement.mapId = 'YOUR_MAP_ID';

เนื่องจากพร็อพเพอร์ตี้ mapId จะแสดงแอตทริบิวต์ HTML คุณจึงอัปเดตพร็อพเพอร์ตี้แบบไดนามิกได้ด้วยการแก้ไขแอตทริบิวต์ ดังนี้

const map3DElement = document.querySelector('gmp-map-3d');

// Alternatively, set the map-id attribute
map3DElement.setAttribute('map-id', 'YOUR_MAP_ID');

ข้อจำกัด

เมื่อใช้การจัดรูปแบบแผนที่ในระบบคลาวด์กับแผนที่ 3 มิติใน Maps JavaScript คุณควรทราบข้อจำกัดบางประการ ดังนี้

  • ไม่รองรับโหมดมืด
  • ไม่รองรับฟีเจอร์ที่ใช้รหัสแผนที่ เช่น การจัดรูปแบบตามข้อมูล