نقشه‌های سه‌بعدی را سفارشی کنید

شما می‌توانید ظاهر و حس نقشه پایه سه‌بعدی را با استفاده از سبک‌دهی نقشه‌های مبتنی بر ابر، سفارشی کنید.

با استفاده از سبک‌دهی نقشه‌های مبتنی بر ابر، شما بر ظاهر و حس نقشه‌ای که به کاربران ارائه می‌دهید، کنترل دارید. با کنترل ویژگی‌هایی مانند تراکم نقاط مورد علاقه (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();

نمای کلی

فرآیند سفارشی‌سازی نقشه‌های سه‌بعدی با استفاده از سبک‌دهی نقشه‌های مبتنی بر ابر، مشابه نقشه‌های دوبعدی است:

۱ ایجاد شناسه نقشه یک شناسه نقشه ایجاد کنید. شناسه‌های نقشه برای مدیریت استایل‌بندی به برنامه شما ارسال می‌شوند. در مراحل بعدی، یک استایل سفارشی را به این شناسه نقشه مرتبط خواهید کرد.
۲ ایجاد یک سبک نقشه مبتنی بر ابر شما باید در این مرحله «3D Hybrid» را انتخاب کرده و از «light mode» استفاده کنید.
۳ سبک نقشه خود را با یک نقشه مرتبط کنید سبک خود را به شناسه نقشه‌ای که در مرحله اول ایجاد کردید، پیوند دهید
۴ شناسه نقشه را به برنامه خود اضافه کنید شناسه نقشه را در کد خود با استفاده از پارامتر map-id مشخص کنید.
۵ شناسه نقشه را منتشر کنید توجه داشته باشید که تغییرات در سبک سفارشی شما پس از انتشار، به طور خودکار در برنامه شما اعمال می‌شوند.

برای نگاهی عمیق‌تر به ایجاد سبک‌های نقشه، بخش «ایجاد و استفاده از سبک‌های نقشه» را مرور کنید.

به‌روزرسانی پویای شناسه نقشه

شما می‌توانید ویژگی 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، محدودیت‌های خاصی وجود دارد که باید از آنها آگاه باشید:

  • حالت تاریک پشتیبانی نمی‌شود.
  • ویژگی‌های مبتنی بر شناسه نقشه مانند استایل‌دهی مبتنی بر داده پشتیبانی نمی‌شوند.