برای استفاده از استایل مبتنی بر داده برای مرزها، باید یک شناسه نقشه ایجاد کنید که از نقشه برداری جاوا اسکریپت استفاده کند. در مرحله بعد، باید یک سبک نقشه جدید ایجاد کنید، لایه های مشخصه مرزی مورد نظر را انتخاب کنید و سبک را با شناسه نقشه خود مرتبط کنید.
یک شناسه نقشه ایجاد کنید
برای ایجاد شناسه نقشه جدید، مراحل سفارشی‌سازی Cloud را دنبال کنید. نوع Map را روی جاوا اسکریپت قرار داده و گزینه Vector را انتخاب کنید. برای فعال کردن شیب و چرخش روی نقشه، گزینه Tilt و/یا Rotation را علامت بزنید. اگر استفاده از شیب یا عنوان بر برنامه شما تأثیر منفی می گذارد، شیب و چرخش را علامت نزنید تا کاربران نتوانند شیب و چرخش را تنظیم کنند.
یک سبک نقشه جدید ایجاد کنید
برای ایجاد یک سبک نقشه جدید، دستورالعمل های موجود در Manage map styles را برای ایجاد سبک دنبال کنید و سبک را با شناسه نقشه ای که ایجاد کرده اید مرتبط کنید .
لایه های ویژگی را انتخاب کنید
در Google API Console می توانید انتخاب کنید که کدام لایه ویژگی نمایش داده شود. این تعیین می کند که چه نوع مرزهایی روی نقشه ظاهر می شوند (به عنوان مثال مناطق، ایالت ها و غیره).
برای مدیریت لایه های ویژگی
- در Google API Console، به صفحه Map Styles بروید .
- در صورت درخواست، پروژه ای را انتخاب کنید.
- یک سبک نقشه را انتخاب کنید.
- برای افزودن یا حذف لایه‌ها، روی منوی کشویی لایه‌های ویژگی کلیک کنید.
- برای ذخیره تغییرات و در دسترس قرار دادن آنها در نقشه های خود، روی ذخیره کلیک کنید.
کد اولیه نقشه خود را به روز کنید
این به شناسه نقشه ای نیاز دارد که به تازگی ایجاد کرده اید. می توانید آن را در صفحه مدیریت نقشه های شما پیدا کنید.
- همانطور که در قطعه زیر نشان داده شده است، API جاوا اسکریپت Maps را با افزودن بارگذار بوت استرپ درون خطی به کد برنامه خود بارگیری کنید:
<script>
(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
key: "YOUR_API_KEY",
v: "weekly",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
زمانی که نقشه را با استفاده از ویژگی
mapIdنمونه برداری می کنید، یک شناسه نقشه ارائه کنید. این باید شناسه نقشه ای باشد که با استفاده از سبک نقشه با فعال بودن لایه های ویژگی پیکربندی کرده اید.map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644}, zoom: 8, mapId: 'MAP_ID' // A map ID using a style with one or more feature layers enabled. });
درباره بارگیری Maps JavaScript API بیشتر بیاموزید.
لایه های ویژگی را به نقشه اضافه کنید
برای دریافت ارجاع به یک لایه ویژگی در نقشه خود، زمانی که نقشه مقداردهی اولیه شد، map.getFeatureLayer() را فراخوانی کنید:
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 20.773, lng: -156.01 },
zoom: 12,
mapId: 'MAP_ID',
});
// Add a feature layer for localities.
localityLayer = map.getFeatureLayer('LOCALITY');
...
}بررسی قابلیت های نقشه
سبک‌سازی مبتنی بر داده برای مرزها به قابلیت‌هایی نیاز دارد که در کنسول API Google فعال شده و با شناسه نقشه مرتبط است. از آنجایی که شناسه‌های نقشه زودگذر هستند و در معرض تغییر هستند، می‌توانید با map.getMapCapabilities() تماس بگیرید تا قبل از فراخوانی قابلیت خاصی (به عنوان مثال استایل مبتنی بر داده) موجود باشد یا خیر. این بررسی اختیاری است.
مثال زیر اضافه کردن شنونده برای اشتراک در تغییرات قابلیت نقشه را نشان می دهد:
// subscribe to changes
map.addListener('mapcapabilities_changed', () => {
const mapCapabilities = map.getMapCapabilities();
if (!mapCapabilities.isDataDrivenStylingAvailable) {
// Data-driven styling is *not* available, add a fallback.
// Existing feature layers are also unavailable.
}
});