برای راهاندازی استایل مبتنی بر داده برای مجموعههای داده، این مراحل را دنبال کنید.
یک کلید API دریافت کنید و API ها را فعال کنید
قبل از استفاده از سبک دادهمحور برای مجموعههای داده، به این موارد نیاز دارید: پروژه Cloud با حساب صورتحساب، و هم Maps JavaScript API و هم Maps Datasets API فعال باشد. برای کسب اطلاعات بیشتر، به تنظیم پروژه Google Cloud خود مراجعه کنید.
Maps JavaScript API را فعال کنید
Maps Datasets API را فعال کنید
یک شناسه نقشه ایجاد کنید
برای ایجاد شناسه نقشه جدید، مراحل سفارشیسازی Cloud را دنبال کنید. نوع Map را روی جاوا اسکریپت قرار داده و گزینه Vector را انتخاب کنید.
وقتی نقشه را نمونهسازی میکنید، با استفاده از ویژگی mapId
یک شناسه نقشه ارائه کنید. شناسه نقشه باید با سبک نقشه که با مجموعه داده برای نمایش مرتبط است مطابقت داشته باشد.
const position = new google.maps.LatLng(40.75, -74.05); const map = new google.maps.Map(document.getElementById('map'), { zoom: 11, center: position, mapId: 'YOUR_MAP_ID', });
یک سبک نقشه جدید ایجاد کنید
برای ایجاد یک سبک نقشه جدید، دستورالعمل های موجود در Manage map styles را برای ایجاد سبک دنبال کنید و سبک را با شناسه نقشه ای که ایجاد کرده اید مرتبط کنید .
کد اولیه نقشه خود را به روز کنید
برای استفاده از استایل مبتنی بر داده برای مجموعههای داده، ابتدا Maps JavaScript API را با افزودن بارگذار بوت استرپ درون خطی به کد برنامه خود بارگیری کنید، همانطور که در اینجا نشان داده شده است (از v=beta
در تگ script
API خود استفاده کنید):
<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>
بررسی قابلیت های نقشه (اختیاری)
یک ظاهر طراحی مبتنی بر داده برای مجموعه داده ها به شناسه نقشه نیاز دارد. اگر شناسه نقشه گم شده باشد یا شناسه نقشه نامعتبر ارسال شود، ویژگی های داده نمی توانند بارگیری شوند. به عنوان یک مرحله عیبیابی، میتوانید یک شنونده mapcapabilities_changed
اضافه کنید تا در تغییرات قابلیت نقشه مشترک شوید. این نشان می دهد که آیا شرایط زیر برآورده شده است:
- شناسه نقشه معتبر در حال استفاده است.
- شناسه نقشه با یک نقشه برداری مرتبط است.
استفاده از قابلیتهای نقشه اختیاری است و فقط برای اهداف آزمایش و عیبیابی یا برای اهداف بازگشتی در زمان اجرا توصیه میشود.
// Optional: subscribe to map capability 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. } });