Genel Bakış
Sınır poligonu için dolgu ve fırça stilini belirlemek üzere FeatureStyleOptions
işlevini kullanın
kullanarak stil özelliklerini tanımlayabilir ve bir özellik katmanındaki style
özelliğini
Stil mantığı içeren google.maps.FeatureStyleFunction
.
Aşağıdaki örnek haritada, tek bir bölgenin sınır poligonunun vurgulanması gösterilmektedir.
style
özelliğini
Stil mantığı içerebilen google.maps.FeatureStyleFunction
. 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 stili ayarlamanız gerekir
tekrar ekleyebilirsiniz.
Bir özellik katmanına ait tüm özelliklerin stilini eşit şekilde ayarlamak için style
özelliğini
google.maps.FeatureStyleOptions
. Bu durumda mantık gerekli olmadığından bir özellik stili işlevi kullanmanız gerekmez.
Stil işlevi, özelliklere uygulandığında her zaman tutarlı sonuçlar döndürmelidir. Örneğin, bir grup özelliği rastgele renklendirmek istiyorsanız rastgelelik özelliği, özellik stili işlevinde yer almamalıdır. Aksi takdirde istenmeyen sonuçlar elde edilir.
Bu fonksiyon bir katmandaki tüm özelliklerin üzerinden ç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 Başlarken bölümündeki adımları uygulayın. yeni bir harita kimliği ve harita stili oluşturun. Konum'u etkinleştirdiğinizden emin olun özellik katmanıdır.
Harita başlatılırken yerleşim birimi özellik katmanına referans alın.
featureLayer = map.getFeatureLayer("LOCALITY");
google.maps.FeatureStyleFunction
türüne sahip 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 stil uygulamak için bir işlev tanımlanmaktadır: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 bulunamazsa veya seçilen özellik türüyle eşleşmezse stil uygulanmaz. Örneğin, "New York City"nin yer kimliğiyle eşleşen bir POSTAL_CODE
katmanına stil uygulamaya çalışmak hiçbir stilin uygulanmamasına neden olur.
Katmandan stil kaldırma
Bir katmandan stili kaldırmak için style
'ü null
olarak ayarlayın:
featureLayer.style = null;
Özellikleri hedeflemek için yer kimlikleri arayın
Bölgelerin yer kimliklerini almak için:
- Yer API'lerini ve Coğrafi Kodlamayı kullanarak bölgeleri ada, ve belirtilen sınırlar içindeki bölgeler için yer kimlikleri elde edin.
- Tıklama etkinliklerinden veri alın. Bu işlev, tıklanan bir bölgeye karşılık gelen özelliği döndürür. Bu özellik, yer kimliğine, görünen ada ve özellik türü kategorisine erişim sağlar.
Kapsam, bölgeye göre değişir. Ayrıntılar için Google sınırları kapsamı başlıklı makaleyi inceleyin.
Coğrafi adlar; USGS Board on Coğrafi Adlar, ve ABD Gazete Dosyaları.
Eksiksiz örnek kod
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>