شروع کنید

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

یک کلید API دریافت کنید و API ها را فعال کنید

قبل از استفاده از استایل مبتنی بر داده برای پیش‌نمایش مجموعه‌های داده، به این موارد نیاز دارید: پروژه Cloud با حساب صورت‌حساب، و هم Maps JavaScript API و هم Maps Datasets API فعال باشد. برای کسب اطلاعات بیشتر، به تنظیم پروژه Google Cloud خود مراجعه کنید.

یک کلید API دریافت کنید

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: "beta",
    // 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.
  }
});

مراحل بعدی