Sınır poligonunun stilini ayarlama

Platform seçin: iOS JavaScript

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, bir alan için sınır poligonunun tek bir bölge olabilir.

style özelliğini Stil mantığı içerebilen google.maps.FeatureStyleFunction. Stil işlevi, etkilenen özellik katmanındaki tüm özellikler üzerinde çalıştırılır ve . 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, bir özellik stili işlevini kullanın.

Stil işlevi uygulandığında her zaman tutarlı sonuçlar döndürmelidir tercih edebilirsiniz. Örneğin, bir özellik grubunu rastgele renklendirmek isterseniz özellik stili işlevinde rastgele kısım yer almamalıdır, çünkü istenmeyen sonuçlara neden olabilir.

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ğerini null olarak ayarlayın.

Yerel konum özellik katmanındaki bir poligonun stilini belirlemek için aşağıdaki adımları uygulayın:

  1. 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.

  2. Harita başlatıldığında konum özellik 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:

    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 bulunamazsa veya seçilen özellik türüyle eşleşirse stil uygulanmaz. Örneğin, "New York" için yer kimliğiyle eşleşen bir POSTAL_CODE katmanının stilini belirlemeye çalışıyor Şehir" 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:

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; USGS Board on Coğrafi Adlar, ve ABD Gazete Dosyaları.

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

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

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;
}

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>
  </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

Örneği Deneyin