Başlama

Platform seçin: Android iOS JavaScript

Sınırlar için veriye dayalı stili kullanmak istiyorsanız JavaScript vektör haritasını kullanan bir harita kimliği oluşturmanız gerekir. Ardından yeni bir harita stili oluşturmanız, 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 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. Haritada yatırma ve döndürme özelliğini etkinleştirmek için Yatırma ve Döndürme'yi işaretleyin. Eğim veya yön kullanımı uygulamanızı olumsuz yönde etkiliyorsa kullanıcıların bu ayarları düzenleyememesi için Eğim ve Döndürme seçeneklerini işaretlemeden bırakın.

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

Özellik katmanlarını seçme

Google API Konsolu'nda hangi özellik katmanlarının gösterileceğini seçebilirsiniz. Bu, haritada hangi tür sınırların (ör. mahalleler, eyaletler vb.) gösterileceğini belirler.

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

  1. Google API Konsolu'nda Harita Stilleri sayfasına gidin.
  2. İstenirse bir proje seçin.
  3. Bir harita stili seçin.
  4. Katman eklemek veya kaldırmak için Özellik katmanları açılır listesini 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 ilk başlatma kodunuzu güncelleme

Bunun için yeni oluşturduğunuz harita kimliği gerekir. Bu sayfaya Haritalar Yönetimi sayfasından ulaşabilirsiniz.

  1. Aşağıdaki snippet'te gösterildiği gibi uygulama kodunuza satır içi önyükleme yükleyiciyi 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. Haritayı mapId mülkünü kullanarak örneklendirirken bir harita kimliği sağlayın. Bu, özellik katmanlarının etkin olduğu bir harita stili 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.
});

Maps 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ılırken map.getFeatureLayer() işlevini ç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 etme

Sınırlar için veri odaklı stil, Google API Konsolu'nda etkinleştirilen ve bir harita kimliğiyle ilişkilendirilen özellikler gerektirir. Harita kimlikleri geçicidir ve değişebilir. Bu nedenle, belirli bir özelliği (ör. veri odaklı stil) kullanmadan önce map.getMapCapabilities() işlevini çağırarak özelliğin kullanılabilir olup olmadığını doğrulayabilirsiniz. Bu kontrol isteğe bağlıdır.

Aşağıdaki örnekte, harita özelliği değişikliklerine abone olmak için bir dinleyicinin nasıl ekleneceği 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