Begrenzungspolygon gestalten

Übersicht

Sie können den Stil für die Füllung und den Strich eines Begrenzungspolygons festlegen. Dazu legen Sie für die Eigenschaft style einer Feature-Ebene eine google.maps.FeatureStyleFunction fest. Mit ihr lassen sich Stilattribute für Farbe, Deckkraft und Linienstärke definieren.

Wenn Sie ein Polygon gestalten möchten, legen Sie die Eigenschaft style auf eine google.maps.FeatureStyleFunction fest. Über die Stilfunktion definieren Sie die Logik zur Gestaltung einzelner Polygone auf einer Feature-Ebene. Wenn featureLayer.style festgelegt ist, wird die Stilfunktion für jedes Feature auf der betroffenen Feature-Ebene ausgeführt. Die Stilfunktion wird angewendet, wenn Sie die Stileigenschaft festlegen. Um sie zu aktualisieren, müssen Sie die Stileigenschaft noch einmal festlegen.

Die Stilfunktion sollte immer konsistente Ergebnisse zurückgeben, wenn sie auf Features angewendet wird. Wenn Sie z. B. eine Reihe von Features nach dem Zufallsprinzip mit Farben versehen wollen, sollte die zufällige Farbauswahl nicht in der Feature-Stilfunktion erfolgen, da dies zu unbeabsichtigten Ergebnissen führen würde.

Da diese Funktion für jedes Feature in einer Ebene ausgeführt wird, ist die Optimierung wichtig. So vermeiden Sie Auswirkungen auf die Renderingzeit:

Aktivieren Sie nur die benötigten Ebenen.
Legen Sie style auf null fest, wenn eine Ebene nicht mehr verwendet wird.

So gestalten Sie ein Polygon auf der Orts-Feature-Ebene:

Falls noch nicht geschehen, erstellen Sie eine neue Karten-ID und einen neuen Kartenstil, indem Sie der Anleitung unter Erste Schritte folgen. Aktivieren Sie auf jeden Fall die Feature-Ebene Ort.
Rufen Sie einen Verweis auf die Orts-Feature-Ebene ab, wenn die Karte initialisiert wird.
```
featureLayer = map.getFeatureLayer("LOCALITY");
```
Erstellen Sie eine Stildefinition vom Typ google.maps.FeatureStyleFunction.

Setzen Sie die style-Eigenschaft der Feature-Ebene auf die FeatureStyleFunction. Im folgenden Beispiel sehen Sie, wie eine Funktion definiert wird, die einen Stil nur auf das google.maps.Feature-Objekt mit einer übereinstimmenden Orts-ID anwendet:

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

Falls die angegebene Orts-ID nicht gefunden wird oder nicht mit dem ausgewählten Featuretyp übereinstimmt, wird der Stil nicht angewendet. Wenn beispielsweise versucht wird, eine POSTAL_CODE-Ebene zu gestalten, die mit der Orts-ID für „Hamburg“ übereinstimmt, wird kein Stil angewendet.

Stile von einer Ebene entfernen

Wenn Sie Stile von einer Ebene entfernen möchten, legen Sie style auf null fest:

featureLayer.style = null;

Orts-IDs für die Feature-Ausrichtung abrufen

So rufen Sie Regionsdaten ab:

Senden Sie eine Regionssuchanfrage, um nach Regionen zu suchen.
Rufen Sie Daten aus Klickereignissen ab. Dabei wird das Feature für die angeklickte Region zurückgegeben und Sie erhalten Zugriff auf die Orts-ID, den Anzeigenamen und die Featuretyp-Kategorie.

Mit dem Viewer für die Regionsabdeckung können Sie sich die verfügbaren Google-Grenzen für alle unterstützten Regionen ansehen.

Die Abdeckung variiert je nach Region. Weitere Informationen

Geografische Namen sind aus vielen Quellen verfügbar, etwa vom United States Geological Survey (USGS) Board on Geographic Names und aus den US Gazetteer Files.

Vollständiges Codebeispiel

TypeScript

let map: google.maps.Map;
//@ts-ignore
let featureLayer;

function initMap() {
  map = new google.maps.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;
    }
  };

}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

let map;
//@ts-ignore
let featureLayer;

function initMap() {
  map = new google.maps.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;
    }
  };
}

window.initMap = 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>
    <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>

    <!--
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=beta"
      defer
    ></script>
  </body>
</html>index.html

Testbeispiel

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell