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.
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
- Google API Konsolu'nda Harita Stilleri sayfasına gidin.
- İstenirse bir proje seçin.
- Bir harita stili seçin.
- Katman eklemek veya kaldırmak için Özellik katmanları açılır menüsünü tıklayın.
- Yaptığınız değişiklikleri kaydetmek ve haritalarınızda kullanılabilir hale getirmek için Kaydet'i tıklayın.
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.
- 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>
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. } });