Cómo controlar eventos de clic

Descripción general

Puedes hacer que una capa de funciones responda a los eventos click del usuario a fin de obtener el ID de lugar, el nombre visible y el tipo de función del límite en el que se hizo clic. En el siguiente mapa de ejemplo, se muestran los límites del área administrativa de nivel 2, un controlador de eventos que define el diseño del polígono en el que se hace clic, así como una ventana de información con los datos del evento.

Cómo habilitar los eventos de la capa de componentes

Sigue estos pasos para habilitar los eventos en una capa de componentes:

Registra una capa de componentes para las notificaciones de eventos de clic. Para ello, llama a addListener() y pasa el tipo de evento (click) y el nombre de la función del controlador 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);index.ts

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);index.js

Aplica un diseño de relleno con una fillOpacity de 0.1 o más para lograr que un componente responda a los eventos. Solo se puede hacer clic en los componentes visibles.

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
};index.ts

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,
};
index.js

Agrega un código para controlar el evento. En este ejemplo, el controlador de eventos aplica diseño en el polígono seleccionado y muestra una ventana de información.

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);
}index.ts

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);
}
index.js

Ejemplo 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;index.ts

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;index.js

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;
}
style.css

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.
      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&libraries=places&v=beta"
      defer
    ></script>
  </body>
</html>index.html

Prueba la muestra

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Más información sobre los eventos