Başlama

Veri kümeleri önizlemesinin veriye dayalı stil özelliklerini ayarlamak için aşağıdaki adımları uygulayın.

Bir API anahtarı alın ve API'leri etkinleştirin

Veri kümeleri önizlemesi için veriye dayalı stili kullanmadan önce şunlara ihtiyacınız vardır: Faturalandırma hesabı olan bir bulut projesine ihtiyacınız vardır ve hem Maps JavaScript API'nin hem de Maps Datasets API'nin etkinleştirilmiş olması gerekir. Daha fazla bilgi edinmek için Google Cloud projenizi oluşturma başlıklı makaleyi inceleyin.

API anahtarı alma

Haritalar JavaScript API'yi etkinleştirme

Haritalar Veri Kümeleri API'sini etkinleştirme

Harita kimliği oluşturun

Yeni bir harita kimliği oluşturmak için Bulut özelleştirme'deki adımları uygulayın. Harita türünü JavaScript olarak ayarlayın ve Vektör'ü seçin.

Haritayı oluştururken mapId özelliğini kullanarak bir harita kimliği sağlayın . Harita kimliği, gösterilecek 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 haritası kimliği oluştur

Yeni harita stili oluşturma

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

Harita ilk kullanıma hazırlama kodunuzu güncelleme

Veri kümeleri önizlemesinde veriye dayalı stili kullanmak için önce burada gösterildiği gibi uygulama kodunuza satır içi önyükleme yükleyicisini 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: "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>

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

Veri kümeleri için veriye dayalı stil, harita kimliği gerektirir. Harita kimliği eksikse veya geçersiz bir harita kimliği iletilmişse veri özellikleri yüklenemez. Sorun giderme adımı olarak, harita özelliği değişikliklerine abone olmak için bir mapcapabilities_changed işleyici 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'nin kullanımı isteğe bağlıdır ve yalnızca test etme ile sorun giderme amacıyla veya çalışma zamanı yedeği için ö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