شروع به کار

پلاتفرم را انتخاب کنید: Android iOS JavaScript

برای استفاده از سبک‌بندی داده‌محور برای مرزها، باید شناسه نقشه‌ای ایجاد کنید که از نقشه بُرداری جاوا اسکریپت استفاده می‌کند. سپس باید سبک نقشه جدیدی ایجاد کنید، لایه‌های عارضه مرز را انتخاب کنید، و سبک را با شناسه نقشه‌تان مرتبط کنید.

ایجاد شناسه نقشه

برای ایجاد شناسه نقشه جدید، مراحل سفارشی‌سازی ابری را دنبال کنید. «نوع نقشه» را روی جاوا اسکریپت تنظیم کنید و گزینه برداری را انتخاب کنید. کج کردن و چرخاندن را علامت بزنید تا کج کردن و چرخاندن در نقشه فعال شود. اگر استفاده از شیب یا جهت بر برنامه شما تأثیر منفی می‌گذارد، شیب و چرخش را علامت‌نزده رها کنید تا کاربران نتوانند آن‌ها را تنظیم کنند.

ایجاد شناسه نقشه بُرداری

ایجاد سبک نقشه جدید

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

انتخاب لایه‌های عارضه

در «کنسول Google API» می‌توانید انتخاب کنید کدام لایه‌های عارضه نمایش داده شود. این تعیین می‌کند که چه نوع مرزهایی در نقشه نشان داده شود (برای مثال محله‌ها، ایالت‌ها، و غیره).

برای مدیریت لایه‌های عارضه

  1. در «کنسول Google API»، به صفحه «سبک‌های نقشه» بروید.
  2. اگر درخواست شد، پروژه‌ای را انتخاب کنید.
  3. سبک نقشه را انتخاب کنید.
  4. روی منو کرکره‌ای لایه‌های عارضه کلیک کنید تا لایه‌ها را اضافه یا حذف کنید.
  5. روی ذخیره کلیک کنید تا تغییراتتان ذخیره شود و در نقشه‌هایتان دردسترس قرار گیرد.

نماگرفتی که منو کرکره‌ای را نشان می‌دهد.

کد مقداردهی اولیه نقشه را به‌روز کنید

این کار به شناسه نقشه‌ای که تازه ایجاد کرده‌اید نیاز دارد. این شناسه را می‌توانید در صفحه مدیریت Maps پیدا کنید.

  1. با افزودن بارگذار خودراه‌انداز به‌خط به کد برنامه‌تان، Maps JavaScript 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>

  1. هنگام نمونه‌سازی نقشه بااستفاده از ویژگی 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');
  ...
}

بررسی قابلیت‌های نقشه

سبک‌بندی داده‌محور برای مرزها به قابلیت‌هایی نیاز دارد که در «کنسول Google API» فعال شده‌اند و با شناسه نقشه مرتبط هستند. چون شناسه‌های نقشه موقتی هستند و ممکن است تغییر کنند، می‌توانید 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.
  }
});

مراحل بعدی