Başlama

Platform seçin: iOS JavaScript

Sınırlar için veriye dayalı stil kullanmak istiyorsanız JavaScript vektör eşlemesi kullanan bir harita kimliği oluşturmanız gerekir. Daha sonra, yeni bir harita stili oluşturmanız, istediğiniz sınır özellik katmanlarını seçmeniz ve stili harita kimliğinizle ilişkilendirmeniz gerekir.

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. Haritada yatırma ve döndürme özelliklerini etkinleştirmek için Yatır ve/veya Döndür seçeneklerini işaretleyin. Yatırma veya yön kullanımı, uygulamanızı olumsuz etkileyecekse kullanıcıların yatırma ve döndürme ayarlarını yapamaması için Yatırma ve Döndürme seçeneklerinin işaretini kaldırın.

Vektör Haritası 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.

Özellik katmanlarını seçin

Google API Konsolu'nda, hangi özellik katmanlarının gösterileceğini seçebilirsiniz. Bu, harita üzerinde ne tür sınırların görüneceğini belirler (örneğin, konumlar, eyaletler vb.).

Özellik katmanlarını yönetmek için

  1. Google API Konsolu'nda Harita Stilleri sayfasına gidin.
  2. İstenirse proje seçin.
  3. Harita stili seçin.
  4. Katman eklemek veya kaldırmak için Özellik katmanları açılır menüsünü tıklayın.
  5. Değişikliklerinizi kaydetmek ve haritalarınızda kullanılabilir hale getirmek için Kaydet'i tıklayın.

Açılır menüyü gösteren ekran görüntüsü.

Harita başlatma kodunuzu güncelleme

Bunun için az önce oluşturduğunuz harita kimliği gerekir. Haritalar Yönetimi sayfanızda bulabilirsiniz.

  1. Aşağıdaki snippet'te gösterildiği gibi, uygulama kodunuza satır içi önyükleme yükleyicisini ekleyerek Maps JavaScript API'yi yükleyin:
<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 özelliğini kullanarak haritayı somutlaştırırken bir harita kimliği sağlayın. Bu, özellik katmanlarının etkinleştirildiği bir harita stilini kullanarak yapılandırdığınız harita kimliği olmalıdır.

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

Haritalar JavaScript API'yi yükleme hakkında daha fazla bilgi edinin.

Haritaya özellik katmanları ekleme

Haritanızdaki bir özellik katmanına referans almak için harita başlatıldığında map.getFeatureLayer() komutunu çağırın:

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

Harita özelliklerini kontrol edin

Sınırlar için veriye dayalı stil, Google API Konsolu'nda etkinleştirilen ve bir harita kimliğiyle ilişkilendirilmiş özellikler gerektirir. Harita kimlikleri geçici olduğundan ve değişebileceğinden, belirli bir özelliğin (ör. veriye dayalı stil) çağrılmadan önce kullanılabilir olup olmadığını doğrulamak için map.getMapCapabilities() öğesini çağırabilirsiniz. Bu kontrol isteğe bağlıdır.

Aşağıdaki örnekte, harita özellik değişikliklerine abone olmak için bir işleyici eklenmesi gösterilmektedir:

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

Sonraki adımlar