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

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

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

توفّر ميزة "تصميم الخرائط باستخدام السحابة الإلكترونية" تجربة تعديل بدون استخدام الرموز في 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:

• لا يتوفّر "الوضع الداكن" إلا في وضع "ROADMAP" (لا يتوفّر في وضعَي "HYBRID" و"SATELLITE").
• لا تتوفّر الميزات التي تستخدم معرّف الخريطة، مثل التصميم المستند إلى البيانات.