Présentation
Vous pouvez styliser le remplissage et le trait d'un polygone de délimitation en définissant la propriété style
d'un calque d'éléments géographiques sur une google.maps.FeatureStyleFunction
, que vous pouvez utiliser pour définir des attributs de style pour la couleur, l'opacité et l'épaisseur du trait.
Pour styliser un polygone, définissez la propriété style
sur google.maps.FeatureStyleFunction
. La fonction de style vous permet de définir une logique pour styliser des polygones individuels sur un calque d'éléments géographiques. Lorsque featureLayer.style
est défini, la fonction de style est exécutée sur chaque élément géographique du calque d'élément concerné. La fonction est appliquée au moment où vous définissez la propriété de style. Pour le modifier, vous devez définir la propriété "style" à nouveau.
La fonction de style doit toujours renvoyer des résultats cohérents lorsqu'elle est appliquée sur des éléments géographiques. 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 de caractéristiques, car cela générerait des résultats indésirables.
Étant donné que cette fonction s'exécute sur chaque caractéristique 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é, procédez comme suit :
- Si ce n'est pas déjà fait, suivez les étapes de la section Premiers pas 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 géographiques 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 de l'élément 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
// 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 ou est introuvable, ou s'il ne correspond pas au type d'élément sélectionné, le style n'est pas appliqué. Par exemple, si vous tentez de styliser 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 géographiques
Pour obtenir les données de région :
- Effectuez une requête Region Lookup pour rechercher des régions.
- Obtenez les données des événements de clic (renvoie l'élément géographique correspondant à une région sur laquelle l'utilisateur a cliqué, ce qui vous permet d'accéder à son identifiant de lieu, à son nom à afficher et à sa catégorie de type d'élément)
Utilisez le lecteur de couverture régionale pour afficher les limites Google disponibles pour toutes les régions compatibles.
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; function initMap() { map = new google.maps.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; } }; } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
let map; //@ts-ignore let featureLayer; function initMap() { map = new google.maps.Map(document.getElementById("map"), { center: { lat: 20.773, lng: -156.01 }, 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; } }; } window.initMap = 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> <!-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises. See https://developers.google.com/maps/documentation/javascript/load-maps-js-api for more information. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=beta" defer ></script> </body> </html>