Başlama

Platform seçin: iOS JavaScript

Sınırlar için veriye dayalı stil 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, istediğiniz sınır özellik katmanlarını seçmeniz ve stili harita kimliğinizle ilişkilendirmeniz gerekir.

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. Harita üzerinde yatırma ve döndürmeyi etkinleştirmek için Yatır ve/veya Döndürme'yi işaretleyin. Eğme ya da yön ayarının kullanılması uygulamanızı olumsuz yönde etkileyecekse kullanıcıların yatırma ve döndürmeyi ayarlayamamaları için Yatır 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, 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ç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 (ör. semtler, 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. Yaptığınız değişiklikleri kaydetmek ve haritalarınızda kullanılabilir hale getirmek için Kaydet'i tıklayın.

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

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

Bu işlem, az önce oluşturduğunuz harita kimliğini gerektirir. Bunu 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 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'sini yükleme hakkında daha fazla bilgi edinin.

Haritaya özellik katmanları ekleme

Haritanızdaki bir özellik katmanına referans almak için, harita ilk kullanıma hazırlandığında map.getFeatureLayer() çağrısı yapı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şkilendirilen özellikler gerektirir. Harita kimlikleri geçici olduğundan ve değişebildiğinden, belirli bir özelliğin (örneğin veriye dayalı stil) çağrılmadan önce kullanılabilir olup olmadığını doğrulamak için map.getMapCapabilities() yöntemini ç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 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