Przegląd
Aby określić styl wypełnienia i kreski wielokąta granicy, użyj właściwości FeatureStyleOptions
do określenia atrybutów stylu, a właściwość style
w warstwie cech ustaw na google.maps.FeatureStyleFunction
, która zawiera logikę stylu.
Na poniższej przykładowej mapie przedstawiono zaznaczanie wielokąta granicy dla pojedynczego regionu.
Zastosuj styl do obiektów granicy, ustawiając właściwość style
na google.maps.FeatureStyleFunction
, która może zawierać logikę stylizowania. Funkcja stylu jest uruchamiana po każdej funkcji w warstwie cech, której dotyczy problem, i stosowana podczas ustawiania właściwości stylu. Aby go zaktualizować, musisz ponownie
ustawić właściwość stylu.
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ć funkcji stylu cech, ponieważ logika nie jest wymagana.
Funkcja stylu powinna zawsze zwracać spójne wyniki po zastosowaniu do funkcji. Jeśli na przykład chcesz losowo pokolorować zbiór obiektów, w funkcji stylu cech nie powinien on mieć miejsca, ponieważ spowodowałoby to niezamierzone zachowanie.
Ta funkcja działa po wszystkich funkcjach w warstwie, dlatego optymalizacja jest ważna. Aby uniknąć problemów z czasem 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 nie zostało to jeszcze zrobione, wykonaj czynności opisane w artykule Pierwsze kroki, aby utworzyć nowy identyfikator i styl mapy. Pamiętaj, by włączyć warstwę cech Miejscowość.
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
. Poniższy przykład pokazuje, jak zdefiniować funkcję stosującą styl tylko do elementugoogle.maps.Feature
z pasującym identyfikatorem 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 podany identyfikator miejsca nie zostanie znaleziony lub nie pasuje do wybranego typu obiektu, styl nie zostanie zastosowany. Jeśli na przykład styl warstwy POSTAL_CODE
pasuje do identyfikatora miejsca „Nowy Jork”, nie zostanie zastosowany żaden styl.
Usuwanie stylu z warstwy
Aby usunąć styl z warstwy, ustaw style
na null
:
featureLayer.style = null;
Wyszukaj identyfikatory miejsc, aby kierować reklamy na obiekty
Aby uzyskać identyfikatory miejsc dla regionów:
- Używaj interfejsów API Miejsc oraz funkcji geokodowaniado wyszukiwania regionów według nazwy i pobierania identyfikatorów miejsc dla regionów znajdujących się w określonych granicach.
- Uzyskiwanie danych ze zdarzeń kliknięć 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 Location Names i U.S. Gazetteer Files.
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>