Başlama

Platform seçin: iOS JavaScript

Sınırlar için veriye dayalı stil kullanmak istiyorsanız JavaScript vektör eşlemesi. Daha sonra, yeni bir harita stili oluşturmalı ve istediğiniz özellik katmanlarını kullanabilir ve stili harita kimliğinizle ilişkilendirebilirsiniz.

Harita kimliği oluşturma

Yeni bir harita kimliği oluşturmak için şu adımları uygulayın: Bulut özelleştirme. 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. Eğer Yatırma veya yön kullanımı uygulamanızı olumsuz etkiler. Yatırma özelliğini bırakın ve Kullanıcıların yatırma ve döndürme işlemlerini ayarlayamaması için döndürme seçeneğinin işareti kaldırıldı.

Vektör Haritası Kimliği Oluştur

Yeni harita stili oluşturma

Yeni bir harita stili oluşturmak için Harita stillerini yönetme başlıklı makaledeki talimatları uygulayın. tıklayın 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 haritada hangi tür sınırların gösterileceğini belirler (örneğin, bölgeler, 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'da bulabilirsiniz. Yönetim sayfasını ziyaret edin.

  1. Satır içi önyüklemeyi ekleyerek Maps JavaScript API'yi yükleme yükleyicisini uygulama kodunuza eklemeniz gerekir:
<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, özelliğe sahip bir harita stili kullanarak yapılandırdığınız harita kimliği olmalıdır katmanlar etkinleştirildi.

    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ıyla ilgili referans almak için map.getFeatureLayer() numaralı telefonu arayın harita ilk kullanıma sunulduğunda:

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, bir harita kimliğiyle ilişkilendirilir. Harita kimlikleri geçici olduğu için ve değişebilir, map.getMapCapabilities() numaralı telefonu arayabilirsiniz belirli bir özelliğin (örneğin, veriye dayalı stil) kullanılabilir. Bu kontrol isteğe bağlıdır.

Aşağıdaki örnekte, harita özelliğine abone olmak için bir dinleyici eklenmesi gösterilmektedir değişiklikler:

// 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