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

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

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

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

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

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

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