Begrenzungspolygon gestalten

Plattform auswählen: Android iOS JavaScript

Übersicht

Sie können Füllung und Strich eines Begrenzungspolygons gestalten. Dazu verwenden Sie FeatureStyleOptions, um Stilattribute zu definieren, und legen für die style-Eigenschaft einer Elementebene eine google.maps.FeatureStyleFunction fest, die Gestaltungslogik enthält.

In der folgenden Beispielkarte wird das Begrenzungspolygon für eine einzelne Region gestaltet, um es hervorzuheben.

Um Begrenzungselemente zu gestalten, legen Sie für die style-Eigenschaft eine google.maps.FeatureStyleFunction fest, die entsprechende Logik enthalten kann. Die Stilfunktion wird für jedes Element auf der betroffenen Elementebene ausgeführt. Sie wird angewendet, wenn Sie die Stileigenschaft festlegen. Um sie zu aktualisieren, müssen Sie die Stileigenschaft noch einmal festlegen.

Wenn alle Elemente einer Elementebene einheitlich gestaltet werden sollen, legen Sie für die style-Eigenschaft eine google.maps.FeatureStyleOptions-Funktion fest. Da in diesem Fall keine Logik erforderlich ist, müssen Sie keine Element-Stilfunktion verwenden.

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

Da diese Funktion für jedes Element 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 Element-Ebene „Ort“:

1. Falls noch nicht geschehen, erstellen Sie eine neue Karten-ID und einen neuen Kartenstil. Folgen Sie dazu der Anleitung unter Erste Schritte. Aktivieren Sie auf jeden Fall die Element-Ebene Ort.

2. Rufen Sie einen Verweis auf die Element-Ebene „Ort“ ab, wenn die Karte initialisiert wird.

   featureLayer = map.getFeatureLayer("LOCALITY");

3. Erstellen Sie eine Stildefinition vom Typ google.maps.FeatureStyleFunction.

4. Legen Sie die style-Eigenschaft der Element-Ebene auf die FeatureStyleFunction fest. 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

   Hinweis:Lesen Sie den Leitfaden zur Verwendung von TypeScript und Google Maps.

   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 Elementtyp ü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 Element-Ausrichtung abrufen

So rufen Sie Orts-IDs für Regionen ab:

• Verwenden Sie Places APIs und Geocoding, um anhand des Namens nach Regionen zu suchen und Orts-IDs für Regionen innerhalb eines bestimmten Bereichs zu erhalten.
• Rufen Sie Daten von Click-Events ab. Dabei wird das Element für die angeklickte Region zurückgegeben und Sie erhalten Zugriff auf die Orts-ID, den Anzeigenamen und die Elementtyp-Kategorie.

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 oder aus den US Gazetteer Files.

Vollständiges Codebeispiel

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

Hinweis:Lesen Sie den Leitfaden zur Verwendung von TypeScript und Google Maps.

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

Hinweis:Der JavaScript-Code wird aus dem TypeScript-Snippet erstellt.

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

Testbeispiel

JSFiddle.net Google Cloud Shell