Başlama

Veri kümelerinin veriye dayalı stilini ayarlamak için aşağıdaki adımları uygulayın.

API anahtarı alma ve API'leri etkinleştirme

Veri kümeleri için veriye dayalı stilleri kullanmadan önce, faturalandırma hesabı içeren bir bulut projesine ve hem Maps JavaScript API hem de Maps Datasets API'nin etkinleştirilmiş olması gerekir. Daha fazla bilgi için Google Cloud projenizi oluşturma başlıklı makaleye göz atın.

API anahtarı alma

Haritalar JavaScript API'yi etkinleştirme

Haritalar Veri Kümeleri API'sini etkinleştirme

Harita kimliği oluşturma

Yeni bir harita kimliği oluşturmak için Bulut özelleştirme bölümündeki adımları uygulayın. Harita türünü JavaScript olarak ayarlayın ve Vektör seçeneğini belirleyin.

Haritayı örneklendirirken mapId özelliğini kullanarak bir harita kimliği sağlayın . Harita kimliği, görüntülenecek veri kümesiyle ilişkilendirilen harita stiline karşılık gelmelidir.

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',
});

Vektör harita kimliği oluştur

Yeni harita stili oluşturma

Yeni bir harita stili oluşturmak için, stili oluşturmak üzere Harita stillerini yönetme bölümündeki talimatları izleyin ve stili, az önce oluşturduğunuz harita kimliğiyle ilişkilendirin.

Harita başlatma kodunuzu güncelleme

Veri kümeleri için veriye dayalı stili kullanmak istiyorsanız öncelikle burada gösterildiği gibi, satır içi önyükleme yükleyicisini uygulama kodunuza ekleyerek Maps JavaScript API'yi yükleyin (API script etiketinizde v=beta kullanın):

<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>

Harita özelliklerini kontrol edin (isteğe bağlı)

Veri kümeleri için veriye dayalı stil için harita kimliği gerekir. Harita kimliği eksikse veya geçersiz bir harita kimliği iletildiyse veri özellikleri yüklenemez. Sorun giderme adımı olarak, harita özellikleri değişikliklerine abone olmak için mapcapabilities_changed işleyicisi ekleyebilirsiniz. Bu, aşağıdaki koşulların karşılanıp karşılanmadığını gösterir:

  • Geçerli bir harita kimliği kullanılıyor.
  • Harita kimliği bir vektör haritasıyla ilişkilendirilir.

Harita Özellikleri'ni kullanmak isteğe bağlıdır ve yalnızca test ve sorun giderme amacıyla ya da çalışma zamanında istenen yedek amacıyla önerilir.

// 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.
  }
});

Sonraki adımlar