Überblick
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
styleaufnullfest, wenn eine Ebene nicht mehr verwendet wird.
So gestalten Sie ein Polygon auf der Element-Ebene „Ort“:
- 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.
Rufen Sie einen Verweis auf die Element-Ebene „Ort“ ab, wenn die Karte initialisiert wird.
featureLayer = map.getFeatureLayer("LOCALITY");Erstellen Sie eine Stildefinition vom Typ
google.maps.FeatureStyleFunction.Legen Sie die
style-Eigenschaft der Element-Ebene auf dieFeatureStyleFunctionfest. Im folgenden Beispiel sehen Sie, wie eine Funktion definiert wird, die einen Stil nur auf dasgoogle.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; } };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; } };
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();
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();
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;
}
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>
<!-- 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>