Sınır poligonuna stil uygulama

Platform seçin: Android iOS JavaScript

Genel Bakış

Bir sınır poligonunun dolgusunu ve konturunu stilize etmek için stil özelliklerini tanımlamak üzere FeatureStyleOptions öğesini kullanın ve stil mantığını içeren bir google.maps.FeatureStyleFunction olarak bir özellik katmanında style özelliğini ayarlayın.

Aşağıdaki örnek haritada, tek bir bölgenin 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 özellikleri tek tipte stilize etmek için style özelliğini google.maps.FeatureStyleOptions olarak ayarlayın. Bu durumda, mantık gerekmediğinden özellik stili işlevi kullanmanız gerekmez.

Stil işlevi, özelliklere uygulandığında her zaman tutarlı sonuçlar vermelidir. Örneğin, bir dizi özelliği rastgele renklendirmek istiyorsanız rastgele bölüm, özellik stili işlevinde yer almamalıdır. Aksi takdirde, istenmeyen sonuçlar ortaya çıkar.

Bu işlev bir katmandaki her özellik üzerinde çalıştığından 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.

Yerel bölge öğe katmanındaki bir poligonu stilize etmek 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şlangıç bölümündeki adımları uygulayın. Yerleşim Yeri özellik katmanını etkinleştirdiğinizden emin olun.

  2. Harita başlatıldığında yerellik öğesi katmanına referans alın.

    TypeScript

    // Get the feature layer.
featureLayer = innerMap.getFeatureLayer(google.maps.FeatureType.LOCALITY);
    index.ts

    JavaScript

    // Get the feature layer.
featureLayer = innerMap.getFeatureLayer(google.maps.FeatureType.LOCALITY);
    index.js

  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, yalnızca eşleşen yer kimliğine sahip google.maps.Feature için stil uygulamak üzere bir işlev tanımlama gösterilmektedir:

    TypeScript

    // Define a style with purple fill and border.
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.
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.
const featureStyleOptions = {
    strokeColor: '#810FCB',
    strokeOpacity: 1.0,
    strokeWeight: 3.0,
    fillColor: '#810FCB',
    fillOpacity: 0.5
};
// Apply the style to a single boundary.
featureLayer.style = (options) => {
    if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') { // Hana, HI
        return featureStyleOptions;
    }
};
    index.js

Belirtilen yer kimliği bulunamazsa veya seçilen özellik türüyle eşleşmezse stil uygulanmaz. Örneğin, "New York City" için yer kimliğiyle eşleşen bir POSTAL_CODE katmanını stilize etmeye çalışmak, stil uygulanmamasına neden olur.

Katmandan stil kaldırma

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

featureLayer.style = null;

Hedeflenecek özellikler için yer kimliklerini arama

Bölgeler için yer kimliklerini almak üzere:

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 Geographic Names ve U.S. Gazetteer Files gibi birçok kaynaktan edinilebilir.

Eksiksiz örnek kod

TypeScript

let featureLayer;

async function initMap() {
  // Request needed libraries.
  await google.maps.importLibrary("maps") as google.maps.MapsLibrary;

  // Get the gmp-map element.
  const mapElement = document.querySelector(
    "gmp-map"
  ) as google.maps.MapElement;

  // Get the inner map.
  const innerMap = mapElement.innerMap;

  // Get the feature layer.
  featureLayer = innerMap.getFeatureLayer(google.maps.FeatureType.LOCALITY);

  // Define a style with purple fill and border.
  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.
  featureLayer.style = (options: { feature: { placeId: string; }; }) => {
    if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') { // Hana, HI
      return featureStyleOptions;
    }
  };

}

initMap();
index.ts

JavaScript

let featureLayer;
async function initMap() {
    // Request needed libraries.
    await google.maps.importLibrary("maps");
    // Get the gmp-map element.
    const mapElement = document.querySelector("gmp-map");
    // Get the inner map.
    const innerMap = mapElement.innerMap;
    // Get the feature layer.
    featureLayer = innerMap.getFeatureLayer(google.maps.FeatureType.LOCALITY);
    // Define a style with purple fill and border.
    const featureStyleOptions = {
        strokeColor: '#810FCB',
        strokeOpacity: 1.0,
        strokeWeight: 3.0,
        fillColor: '#810FCB',
        fillOpacity: 0.5
    };
    // Apply the style to a single boundary.
    featureLayer.style = (options) => {
        if (options.feature.placeId == 'ChIJ0zQtYiWsVHkRk8lRoB1RNPo') { // Hana, HI
            return featureStyleOptions;
        }
    };
}
initMap();
index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
gmp-map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

style.css

HTML

<html>
  <head>
    <title>Boundaries Simple</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
    <!-- 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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
  </head>
  <body>
    <gmp-map center="20.773,-156.01" zoom="12" map-id="8b37d7206ccf0121d4414bb0">
  </body>
</html>
index.html

Örneği deneyin