تخصيص الخرائط الثلاثية الأبعاد

يمكنك تخصيص مظهر الخريطة الأساسية الثلاثية الأبعاد باستخدام تصميم الخرائط باستخدام السحابة الإلكترونية.

باستخدام ميزة "تصميم الخرائط باستخدام السحابة الإلكترونية"، يمكنك التحكّم في شكل الخريطة التي تعرضها للمستخدمين وأسلوبها. من خلال التحكّم في ميزات مثل كثافة نقاط الاهتمام وإزالة فئات معيّنة من نقاط الاهتمام وتعديل تعبئة العناصر أو حدودها، يمكنك إنشاء تجربة خريطة مخصّصة للمستخدمين.

توفّر ميزة "تصميم الخرائط باستخدام السحابة الإلكترونية" تجربة تعديل بدون رموز برمجية في Google Cloud Console. يرتبط كل نمط مخصّص تنشئه بمعرّف خريطة، وستظهر التعديلات التي يتم إجراؤها على نمطك في وحدة تحكّم الخرائط في تطبيقك تلقائيًا.

يعرض المثال التالي خريطة تستخدم نمطًا مخصّصًا لتغيير لون رموز ميزات الاستجمام والنص إلى اللون البرتقالي:

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();
index.js

نظرة عامة

تتشابه عملية تخصيص الخرائط الثلاثية الأبعاد باستخدام ميزة "تصميم الخرائط باستخدام السحابة الإلكترونية" مع عملية تخصيص الخرائط الثنائية الأبعاد، وهي كما يلي:

1	إنشاء معرّف خريطة	أنشئ معرّف خريطة. يتم تمرير أرقام تعريف الخرائط إلى تطبيقك للتعامل مع الأنماط. ستربط في الخطوات اللاحقة نمطًا مخصّصًا بمعرّف الخريطة هذا.
2	إنشاء نمط خريطة مستند إلى السحابة الإلكترونية	يجب اختيار "ثلاثي الأبعاد المختلط" واستخدام "الوضع الفاتح" في هذه الخطوة.
3	ربط نمط الخريطة بخريطة	ربط أسلوبك بمعرّف الخريطة الذي أنشأته في الخطوة الأولى
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');

القيود

يجب الانتباه إلى بعض القيود عند استخدام ميزة "تصميم الخرائط باستخدام السحابة الإلكترونية" مع "الخرائط الثلاثية الأبعاد" في Maps JavaScript:

• لا يتوفّر "الوضع الداكن".
• لا تتوافق الخرائط مع الميزات التي تتطلّب توفّر معرّف، مثل تصميم مستند إلى البيانات.