Omówienie
Aby nadać styl wypełnieniu i obrysowi poligonu granicznego, użyj atrybutów stylu FeatureStyleOptions
. Właściwość style
w warstwie obiektów ustaw na google.maps.FeatureStyleFunction
, która zawiera logikę stylizacji.
Na przykładowej mapie poniżej zaznaczono wielokąt granicy pojedynczego regionu.
Zastosuj styl do obiektów granicy, ustawiając właściwość style
na
google.maps.FeatureStyleFunction
, która może zawierać funkcje logiczne stylu. Funkcja stylu jest wykonywana na każdej funkcji w odpowiedniej warstwie funkcji i jest stosowana w momencie ustawienia właściwości stylu. Aby zaktualizować ten element, musisz ponownie ustawić właściwość style.
Aby zastosować jednolity styl do wszystkich obiektów w warstwie cech, ustaw właściwość style
na
google.maps.FeatureStyleOptions
. W takim przypadku nie musisz używać atrybutu
stylu funkcji, bo logika nie jest wymagana.
Zastosowanie funkcji stylu powinna zawsze zwracać spójne wyniki nad funkcjami. Jeśli na przykład chcesz losowo pokolorować zestaw obiektów, część losowa nie powinna być zastępowana w funkcji stylu obiektu, ponieważ spowodowałoby niezamierzone skutki.
Ponieważ funkcja ta działa po wszystkich elementach w warstwie, optymalizacja są ważne. Aby uniknąć wpływu na czas renderowania:
- Włącz tylko te warstwy, których potrzebujesz.
- Ustaw
style
nanull
, gdy warstwa nie jest już używana.
Aby zmienić styl wielokąta w warstwie obiektów o rejonie, wykonaj następujące czynności:
- Jeśli jeszcze tego nie zrobiono, wykonaj czynności opisane w sekcji Pierwsze kroki, aby utworzyć nowy identyfikator mapy i nowy styl mapy. Pamiętaj, aby włączyć opcję Rejon warstwy cech.
Uzyskaj odwołanie do warstwy cech lokalizacji przy zainicjowaniu mapy.
featureLayer = map.getFeatureLayer("LOCALITY");
Utwórz definicję stylu typu
google.maps.FeatureStyleFunction
.Ustaw właściwość
style
w warstwie cech naFeatureStyleFunction
. Ten przykład pokazuje definiowanie funkcji, która ma zastosować styl tylko do elementugoogle.maps.Feature
o pasującym identyfikatorze miejsca: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; } };
Jeśli nie uda się znaleźć określonego identyfikatora miejsca lub jeśli nie pasuje on do wybranego typu funkcji, styl nie zostanie zastosowany. Przykład:
próbuję dodać styl warstwy POSTAL_CODE
do identyfikatora miejsca „Nowy Jork”
Miasto nie zostałby zastosowany żaden styl.
Usuwanie stylizacji z warstwy
Aby usunąć stylizację z warstwy, ustaw wartość style
na null
:
featureLayer.style = null;
Wyszukaj identyfikatory miejsc, aby kierować reklamy na obiekty
Aby uzyskać identyfikatory miejsc dla regionów:
- Użyj interfejsów Places API i geokodowania, by wyszukać regiony według nazwy, i uzyskać identyfikatory miejsc dla regionów w określonych granicach.
- Pozyskiwanie danych ze zdarzeń kliknięcia. Zwraca obiekt odpowiadający klikniętemu regionowi i zapewnia dostęp do identyfikatora miejsca, wyświetlanej nazwy i kategorii typu obiektu.
Zasięg różni się w zależności od regionu. Więcej informacji znajdziesz w artykule Zasięg granic Google.
Nazwy geograficzne są dostępne w wielu źródłach, takich jak USGS Board on Geographic Names i pliki amerykańskiego spisu urzędowego.
Uzupełnij przykładowy kod
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> <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>