Başlama

Platform seçin: Android iOS JavaScript

Veri kümeleri için veri odaklı stili ayarlamak üzere aşağıdaki adımları uygulayın.

API anahtarı alma ve API'leri etkinleştirme

Veri odaklı stili veri kümelerinde kullanmadan önce şunları yapmanız gerekir: Faturalandırma hesabı olan bir Cloud projesi ve hem Haritalar JavaScript API'si hem de Haritalar Veri Kümeleri API'si etkin olmalıdır. Daha fazla bilgi için Google Cloud projenizi ayarlama başlıklı makaleyi inceleyin.

API anahtarı alma

Maps JavaScript API'yi etkinleştirme

Haritalar Veri Kümeleri API'yi etkinleştirme

Harita kimliği oluşturma

Yeni bir harita kimliği oluşturmak için Cloud ö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 mülkünü kullanarak bir harita kimliği sağlayın . Harita kimliği, görüntülenecek veri kümesiyle ilişkili 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şturma

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 stilinizi yeni oluşturduğunuz harita kimliğiyle ilişkilendirin.

Harita ilk başlatma kodunuzu güncelleme

Veri odaklı stili veri kümeleri için kullanmak istiyorsanız ö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: "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 etme (isteğe bağlı)

Veri kümeleri için veri odaklı stil, harita kimliği gerektirir. Harita kimliği eksikse veya geçersiz bir harita kimliği iletildiyse veri özellikleri yüklenemez. Sorun giderme adımı olarak, harita özelliği değişikliklerine abone olmak için bir mapcapabilities_changed dinleyici 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 isteğe bağlıdır ve yalnızca test ve sorun giderme amacıyla veya çalışma zamanında yedek olarak kullanılması ö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