Sınır poligonunun stilini ayarlama

Genel bakış

Bir sınır poligonu için dolgu ve fırça stilini belirlemek üzere stil özelliklerini tanımlamak üzere FeatureStyleOptions özelliğini ve bir özellik katmanındaki style özelliğini, stil mantığı içeren google.maps.FeatureStyleFunction olarak ayarlayın.

Aşağıdaki örnek harita, tek bir bölge için sınır poligonu vurgulamayı göstermektedir.

style özelliğini, stil mantığı içerebilen google.maps.FeatureStyleFunction öğesine ayarlayarak sınır özelliklerine stil uygulayın. Stil işlevi, etkilenen özellik katmanındaki her bir özelliğin üzerinden geçer 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ının tüm özelliklerini eşit şekilde biçimlendirmek için style özelliğini google.maps.FeatureStyleOptions olarak ayarlayın. Bu durumda, mantık gerekli olmadığı için özellik stili işlevi kullanmanıza gerek yoktur.

Stil işlevi, özelliklerin ü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 kısmı kullanmamanız gerekir.

Bu işlev bir katmandaki tüm özelliklerin üzerinden geçtiği 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ğerini null olarak ayarlayın.

Konum özelliği katmanında bir poligon stilini ayarlamak için aşağıdaki adımları uygulayın:

1. 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. Şehir özellik katmanını etkinleştirdiğinizden emin olun.

2. Harita ilk kullanıma hazırlandığında konum özelliği katmanına referans alın.

   featureLayer = map.getFeatureLayer("LOCALITY");

3. google.maps.FeatureStyleFunction türünde bir stil tanımı oluşturun.

4. Özellik katmanındaki style özelliğini FeatureStyleFunction olarak ayarlayın. Aşağıdaki örnekte, bir stili yalnızca eşleşen yer kimliğine sahip google.maps.Feature öğesine uygulayacak bir işlevin 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;
     }
   };
   index.ts

   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;
     }
   };
   index.js

Belirtilen yer kimliği bulunmazsa veya seçilen özellik türüyle eşleşmiyorsa stil uygulanmaz. Örneğin, "İstanbul Şehri" için yer kimliğiyle eşleşen bir POSTAL_CODE katmanının stilini oluşturmaya çalıştığınızda hiçbir stil uygulanmaz.

Katmandaki stili kaldırma

Bir katmandaki stili kaldırmak için style değerini null olarak ayarlayın:

featureLayer.style = null;

Özellikleri hedeflemek için yer kimlikleri arama

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 için Yerler API'lerini ve Coğrafi Kodlama'yı kullanın.
• Tıklama etkinliklerinden veri alın. Bu, tıklanan bir bölgeye karşılık gelen Özelliği döndürür ve bölge kimliğine, görünen adına 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ının kapsamına bakın.

Coğrafi adlar, Coğrafi Adlar Üzerindeki USGS Board ve U.S. Gazetteer Files gibi pek çok kaynaktan edinilebilir.

Örnek kodu tamamlayın

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();
index.ts

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 },
    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();
index.js

/* 
 * 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;
}
style.css

<html>
  <head>
    <title>Boundaries Simple</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <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>
index.html