Présentation
Pour appliquer un style de remplissage et de trait à un polygone de limite, utilisez FeatureStyleOptions
pour définir les attributs de style, et définissez la propriété style
d'un calque d'éléments sur une google.maps.FeatureStyleFunction
, qui contient la logique d'application de style.
L'exemple de carte suivant illustre la mise en surbrillance d'un polygone de limite pour une région.
Appliquez un style aux éléments cartographiques de limite en définissant la propriété style
sur une google.maps.FeatureStyleFunction
, qui peut contenir une logique d'application de style. La fonction de style est exécutée sur chaque élément cartographique du calque d'éléments concerné, et elle est appliquée au moment où vous définissez la propriété de style. Pour la modifier, vous devez définir à nouveau la propriété de style.
Pour appliquer un style uniforme à tous les éléments d'un calque d'éléments, définissez la propriété style
sur des google.maps.FeatureStyleOptions
. Dans ce cas, vous n'avez pas besoin d'utiliser une fonction de style d'éléments cartographiques, puisqu'aucune logique n'est requise.
La fonction de style doit toujours renvoyer des résultats cohérents lorsqu'elle est appliquée sur des éléments cartographiques. Par exemple, si vous souhaitez colorer un ensemble d'éléments de manière aléatoire, la partie aléatoire ne doit pas se situer dans la fonction de style d'éléments cartographiques, car cela générerait des résultats indésirables.
Étant donné que cette fonction s'exécute sur chaque élément d'un calque, il est important de l'optimiser. Pour éviter d'affecter les délais d'affichage :
- Activez uniquement les calques dont vous avez besoin.
- Définissez
style
surnull
lorsqu'un calque n'est plus utilisé.
Pour appliquer un style à un polygone dans le calque d'éléments de la localité :
- Si ce n'est pas déjà fait, suivez les étapes de la section Commencer pour créer un ID et un style de carte. N'oubliez pas d'activer le calque d'éléments Localité.
Obtenez une référence au calque d'éléments de la localité lors de l'initialisation de la carte.
featureLayer = map.getFeatureLayer("LOCALITY");
Créez une définition de style de type
google.maps.FeatureStyleFunction
.Définissez la propriété
style
sur le calque d'éléments surFeatureStyleFunction
. L'exemple suivant montre comment définir une fonction pour n'appliquer un style qu'àgoogle.maps.Feature
avec un ID de lieu correspondant :TypeScript
<ph type="x-smartling-placeholder">// 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; } };
Si l'ID de lieu est introuvable ou qu'il ne correspond pas au type d'élément sélectionné, le style ne sera pas appliqué. Par exemple, si vous tentez d'appliquer un style à un calque POSTAL_CODE
correspondant à l'ID de lieu de "New York", aucun style ne sera appliqué.
Supprimer le style d'un calque
Pour supprimer le style d'un calque, définissez le style
sur null
:
featureLayer.style = null;
Rechercher des ID de lieu pour cibler des éléments cartographiques
Pour obtenir des ID de lieu pour des régions :
- Utilisez les API Places et Geocoding pour rechercher des régions par nom et obtenir des ID de lieu pour des régions dans des limites définies.
- Obtenez les données concernant les événements de clic. Cette opération renvoie l'élément cartographique correspondant à une région sur laquelle l'utilisateur a cliqué, ce qui vous permet d'accéder à son ID de lieu, son nom à afficher et sa catégorie de type d'élément.
La couverture varie selon les régions. Pour en savoir plus, consultez Couverture des limites Google.
Les noms géographiques sont disponibles à partir de nombreuses sources, comme l'USGS Board on Geographic Names et le US Gazetteer Files aux États-Unis.
Exemple de code complet
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>