Visão geral
Você pode fazer com que uma camada de recurso responda a eventos click
do usuário para conferir o ID do lugar, o nome de exibição e o tipo de recurso do limite que foi clicado. O exemplo de mapa a seguir mostra os limites do nível 2 da área político-administrativa, um manipulador de eventos que define o estilo do polígono clicado e uma janela de informações com os dados do evento.
Ativar eventos da camada de recursos
Siga estas etapas para ativar eventos em uma camada de recursos:
Registre uma camada de recursos para notificações de evento de clique chamando
addListener()
, transmitindo o tipo de evento (click
) e o nome da função do manipulador de eventos.TypeScript
// Add the feature layer. //@ts-ignore featureLayer = map.getFeatureLayer('ADMINISTRATIVE_AREA_LEVEL_2'); // Add the event listener for the feature layer. featureLayer.addListener('click', handlePlaceClick);
JavaScript
// Add the feature layer. //@ts-ignore featureLayer = map.getFeatureLayer("ADMINISTRATIVE_AREA_LEVEL_2"); // Add the event listener for the feature layer. featureLayer.addListener("click", handlePlaceClick);
Aplique um estilo de preenchimento com um
fillOpacity
de 0,1 ou maior para que um recurso responda aos eventos. Somente os elementos visíveis podem ser clicados.TypeScript
// Stroke and fill with minimum opacity value. //@ts-ignore const styleDefault: google.maps.FeatureStyleOptions = { strokeColor: '#810FCB', strokeOpacity: 1.0, strokeWeight: 2.0, fillColor: 'white', fillOpacity: 0.1 // Polygons must be visible to receive click events. }; // Style for the clicked Administrative Area Level 2 polygon. //@ts-ignore const styleClicked: google.maps.FeatureStyleOptions = { ...styleDefault, fillColor: '#810FCB', fillOpacity: 0.5 };
JavaScript
// Stroke and fill with minimum opacity value. //@ts-ignore const styleDefault = { strokeColor: "#810FCB", strokeOpacity: 1.0, strokeWeight: 2.0, fillColor: "white", fillOpacity: 0.1, // Polygons must be visible to receive click events. }; // Style for the clicked Administrative Area Level 2 polygon. //@ts-ignore const styleClicked = { ...styleDefault, fillColor: "#810FCB", fillOpacity: 0.5, };
Adicione um código para processar o evento. Neste exemplo, o manipulador de eventos define o estilo do polígono selecionado e mostra uma janela de informações.
TypeScript
// Handle the click event. async function handlePlaceClick(event) { let feature = event.features[0]; if (!feature.placeId) return; // Apply the style to the feature layer. applyStyleToSelected(feature.placeId); // Add the info window. const place = await feature.fetchPlace(); let content = '<span style="font-size:small">Display name: ' + place.displayName + '<br/> Place ID: ' + feature.placeId + '<br/> Feature type: ' + feature.featureType + '</span>'; updateInfoWindow(content, event.latLng); }
JavaScript
// Handle the click event. async function handlePlaceClick(event) { let feature = event.features[0]; if (!feature.placeId) return; // Apply the style to the feature layer. applyStyleToSelected(feature.placeId); // Add the info window. const place = await feature.fetchPlace(); let content = '<span style="font-size:small">Display name: ' + place.displayName + "<br/> Place ID: " + feature.placeId + "<br/> Feature type: " + feature.featureType + "</span>"; updateInfoWindow(content, event.latLng); }
Exemplo de código completo
TypeScript
let map: google.maps.Map; let featureLayer; let infoWindow: google.maps.InfoWindow; function initMap() { map = new google.maps.Map(document.getElementById('map') as HTMLElement, { center: { lat: 39.23, lng: -105.73 }, // Park County, CO zoom: 8, // In the cloud console, configure this Map ID with a style that enables the // "Administrative Area Level 2" Data Driven Styling type. mapId: 'a3efe1c035bad51b', // <YOUR_MAP_ID_HERE>, }); // Add the feature layer. //@ts-ignore featureLayer = map.getFeatureLayer('ADMINISTRATIVE_AREA_LEVEL_2'); // Add the event listener for the feature layer. featureLayer.addListener('click', handlePlaceClick); infoWindow = new google.maps.InfoWindow({}); // Apply style on load, to enable clicking. applyStyleToSelected(); } // Handle the click event. async function handlePlaceClick(event) { let feature = event.features[0]; if (!feature.placeId) return; // Apply the style to the feature layer. applyStyleToSelected(feature.placeId); // Add the info window. const place = await feature.fetchPlace(); let content = '<span style="font-size:small">Display name: ' + place.displayName + '<br/> Place ID: ' + feature.placeId + '<br/> Feature type: ' + feature.featureType + '</span>'; updateInfoWindow(content, event.latLng); } // Stroke and fill with minimum opacity value. //@ts-ignore const styleDefault: google.maps.FeatureStyleOptions = { strokeColor: '#810FCB', strokeOpacity: 1.0, strokeWeight: 2.0, fillColor: 'white', fillOpacity: 0.1 // Polygons must be visible to receive click events. }; // Style for the clicked Administrative Area Level 2 polygon. //@ts-ignore const styleClicked: google.maps.FeatureStyleOptions = { ...styleDefault, fillColor: '#810FCB', fillOpacity: 0.5 }; // Apply styles to the map. function applyStyleToSelected(placeid?) { // Apply styles to the feature layer. featureLayer.style = (options) => { // Style fill and stroke for a polygon. if (placeid && options.feature.placeId == placeid) { return styleClicked; } // Style only the stroke for the entire feature type. return styleDefault; }; } // Helper function to create an info window. function updateInfoWindow(content, center) { infoWindow.setContent(content); infoWindow.setPosition(center); infoWindow.open({ map, shouldFocus: false, }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
let map; let featureLayer; let infoWindow; function initMap() { map = new google.maps.Map(document.getElementById("map"), { center: { lat: 39.23, lng: -105.73 }, zoom: 8, // In the cloud console, configure this Map ID with a style that enables the // "Administrative Area Level 2" Data Driven Styling type. mapId: "a3efe1c035bad51b", // <YOUR_MAP_ID_HERE>, }); // Add the feature layer. //@ts-ignore featureLayer = map.getFeatureLayer("ADMINISTRATIVE_AREA_LEVEL_2"); // Add the event listener for the feature layer. featureLayer.addListener("click", handlePlaceClick); infoWindow = new google.maps.InfoWindow({}); // Apply style on load, to enable clicking. applyStyleToSelected(); } // Handle the click event. async function handlePlaceClick(event) { let feature = event.features[0]; if (!feature.placeId) return; // Apply the style to the feature layer. applyStyleToSelected(feature.placeId); // Add the info window. const place = await feature.fetchPlace(); let content = '<span style="font-size:small">Display name: ' + place.displayName + "<br/> Place ID: " + feature.placeId + "<br/> Feature type: " + feature.featureType + "</span>"; updateInfoWindow(content, event.latLng); } // Stroke and fill with minimum opacity value. //@ts-ignore const styleDefault = { strokeColor: "#810FCB", strokeOpacity: 1.0, strokeWeight: 2.0, fillColor: "white", fillOpacity: 0.1, // Polygons must be visible to receive click events. }; // Style for the clicked Administrative Area Level 2 polygon. //@ts-ignore const styleClicked = { ...styleDefault, fillColor: "#810FCB", fillOpacity: 0.5, }; // Apply styles to the map. function applyStyleToSelected(placeid) { // Apply styles to the feature layer. featureLayer.style = (options) => { // Style fill and stroke for a polygon. if (placeid && options.feature.placeId == placeid) { return styleClicked; } // Style only the stroke for the entire feature type. return styleDefault; }; } // Helper function to create an info window. function updateInfoWindow(content, center) { infoWindow.setContent(content); infoWindow.setPosition(center); infoWindow.open({ map, shouldFocus: false, }); } 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>Handle Region Boundary Click Event</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 with https://www.npmjs.com/package/@googlemaps/js-api-loader. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=places&v=beta" defer ></script> </body> </html>