Başlama

Platform seçin: Android 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. Ardından 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. Haritayı yatırma ve döndürme özelliğini etkinleştirmek için Yatırma ve/veya Döndürme'yi işaretleyin. Eğilme veya yön kullanımı uygulamanızı olumsuz yönde etkileyecekse kullanıcıların eğilme ve dönme ayarlarını yapamamaları için Eğilme ve Dönme seçeneklerini işaretli bırakmayın.

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

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ı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şiklik gösterebilir. Bu nedenle, belirli bir özelliğin (ör. veri odaklı stil) kullanılıp kullanılamayacağını doğrulamak için map.getMapCapabilities() işlevini çağırmadan önce çağırabilirsiniz. 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