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

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

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

การจัดรูปแบบแผนที่ในระบบคลาวด์ช่วยให้คุณแก้ไขได้โดยไม่ต้องเขียนโค้ดในคอนโซล 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 มิติ" (รองรับโหมดสว่าง) ในขั้นตอนนี้
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 มีดังนี้

  • โหมดมืดรองรับเฉพาะในโหมด ROADMAP (โหมด HYBRID และ SATELLITE ไม่รองรับโหมดมืด)
  • ระบบไม่รองรับฟีเจอร์ที่เปิดใช้รหัสแผนที่ เช่น การจัดรูปแบบตามข้อมูล