Genel bakış
Sınır poligonunun dolgu ve çizgi stilini belirlemek için stil özelliklerini tanımlamak üzere FeatureStyleOptions
öğesini kullanın ve bir özellik katmanındaki style
özelliğini, stil mantığı içeren bir google.maps.FeatureStyleFunction
olarak ayarlayın.
Aşağıdaki örnek haritada, tek bir bölge için sınır poligonunun vurgulanması gösterilmektedir.
style
özelliğini, stil mantığı içerebilen bir google.maps.FeatureStyleFunction
olarak ayarlayarak sınır özelliklerine stil uygulayın. Stil işlevi, etkilenen özellik katmanındaki her özellik üzerinde çalıştırılır ve stil özelliğini ayarladığınız sırada uygulanır. Güncellemek için stil özelliğini
tekrar ayarlamanız gerekir.
Bir özellik katmanındaki tüm özelliklerin stilini eşit şekilde ayarlamak için style
özelliğini google.maps.FeatureStyleOptions
olarak ayarlayın. Bu durumda, mantık gerekli olmadığı için özellik stili işlevi kullanmanız gerekmez.
Stil işlevi, özellikler üzerine uygulandığında her zaman tutarlı sonuçlar döndürmelidir. Örneğin, bir özellik grubunu rastgele renklendirmek istiyorsanız istenmeyen sonuçlara yol açabileceğinden özellik stili işlevinde rastgele bölümün yer almaması gerekir.
Bu işlev, bir katmandaki tüm özellikler üzerinde çalıştığı için optimizasyon önemlidir. Oluşturma sürelerini etkilememek için:
- Yalnızca ihtiyacınız olan katmanları etkinleştirin.
- Bir katman artık kullanılmadığında
style
değerininull
olarak ayarlayın.
Yerel konum özellik katmanındaki bir poligonun stilini belirlemek için aşağıdaki adımları uygulayın:
- Henüz yapmadıysanız yeni bir harita kimliği ve harita stili oluşturmak için Başlarken bölümündeki adımları izleyin. Konum özellik katmanını etkinleştirdiğinizden emin olun.
Harita başlatıldığında konum özellik katmanına referans alın.
featureLayer = map.getFeatureLayer("LOCALITY");
google.maps.FeatureStyleFunction
türünde bir stil tanımı oluşturun.Özellik katmanındaki
style
özelliğiniFeatureStyleFunction
olarak ayarlayın. Aşağıdaki örnekte, yalnızca eşleşen yer kimliğine sahipgoogle.maps.Feature
öğesine bir stil uygulayacak şekilde işlev tanımlanması gösterilmektedir:TypeScript
// Define a style with purple fill and border. //@ts-ignore const featureStyleOptions: google.maps.FeatureStyleOptions = { strokeColor: '#810FCB', strokeOpacity: 1.0, strokeWeight: 3.0, fillColor: '#810FCB', fillOpacity: 0.5 }; // Apply the style to a single boundary. //@ts-ignore featureLayer.style = (options: { feature: { placeId: string; }; }) => { if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') { // Hana, HI return featureStyleOptions; } };
JavaScript
// Define a style with purple fill and border. //@ts-ignore const featureStyleOptions = { strokeColor: "#810FCB", strokeOpacity: 1.0, strokeWeight: 3.0, fillColor: "#810FCB", fillOpacity: 0.5, }; // Apply the style to a single boundary. //@ts-ignore featureLayer.style = (options) => { if (options.feature.placeId == "ChIJ0zQtYiWsVHkRk8lRoB1RNPo") { // Hana, HI return featureStyleOptions; } };
Belirtilen yer kimliği bulunmazsa veya seçilen özellik türüyle eşleşmezse stil uygulanmaz. Örneğin, "New York Şehir" için yer kimliğiyle eşleşen bir POSTAL_CODE
katmanının stilini belirlemeye
çalışmak, hiçbir stilin uygulanmamasına neden olur.
Katmandan stil kaldırma
Bir katmandan stili kaldırmak için style
özelliğini null
olarak ayarlayın:
featureLayer.style = null;
Özellikleri hedeflemek için yer kimlikleri arayın
Bölgelerin yer kimliklerini almak için:
- Bölgeleri ada göre aramak ve belirtilen sınırlar içindeki bölgeler için yer kimlikleri almak amacıyla Yer API'leri ve Coğrafi Kodlama kullanın.
- Tıklama etkinliklerinden veri alın. Bu komut, tıklanan bölgeye karşılık gelen ve yerin kimliğine, görünen adına ve özellik türü kategorisine erişim sağlayan Özelliği döndürür.
Kapsam bölgeye göre değişir. Ayrıntılar için Google sınırlarının kapsamı bölümüne bakın.
Coğrafi adlar, Coğrafi Adlar Üzerindeki USGS Kurulu ve ABD Gazetesi Dosyaları gibi birçok kaynaktan elde edilebilir.
Örnek kodu tamamlayın
TypeScript
let map: google.maps.Map; //@ts-ignore let featureLayer; async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; map = new Map(document.getElementById('map') as HTMLElement, { center: { lat: 20.773, lng: -156.01 }, // Hana, HI zoom: 12, // In the cloud console, configure this Map ID with a style that enables the // "Locality" feature layer. mapId: 'a3efe1c035bad51b', // <YOUR_MAP_ID_HERE>, }); //@ts-ignore featureLayer = map.getFeatureLayer('LOCALITY'); // Define a style with purple fill and border. //@ts-ignore const featureStyleOptions: google.maps.FeatureStyleOptions = { strokeColor: '#810FCB', strokeOpacity: 1.0, strokeWeight: 3.0, fillColor: '#810FCB', fillOpacity: 0.5 }; // Apply the style to a single boundary. //@ts-ignore featureLayer.style = (options: { feature: { placeId: string; }; }) => { if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') { // Hana, HI return featureStyleOptions; } }; } initMap();
JavaScript
let map; //@ts-ignore let featureLayer; async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps"); map = new Map(document.getElementById("map"), { center: { lat: 20.773, lng: -156.01 }, // Hana, HI zoom: 12, // In the cloud console, configure this Map ID with a style that enables the // "Locality" feature layer. mapId: "a3efe1c035bad51b", // <YOUR_MAP_ID_HERE>, }); //@ts-ignore featureLayer = map.getFeatureLayer("LOCALITY"); // Define a style with purple fill and border. //@ts-ignore const featureStyleOptions = { strokeColor: "#810FCB", strokeOpacity: 1.0, strokeWeight: 3.0, fillColor: "#810FCB", fillOpacity: 0.5, }; // Apply the style to a single boundary. //@ts-ignore featureLayer.style = (options) => { if (options.feature.placeId == "ChIJ0zQtYiWsVHkRk8lRoB1RNPo") { // Hana, HI return featureStyleOptions; } }; } initMap();
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
HTML
<html> <head> <title>Boundaries Simple</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- prettier-ignore --> <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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script> </body> </html>