Mausereignisse verarbeiten

Plattform auswählen: Android iOS JavaScript

Übersicht

Sie können eine Element-Ebene so konfigurieren, dass auf mousemove- und click-Ereignisse reagiert wird, um Informationen zur angeklickten Grenze zu erhalten. Diese Informationen umfassen die ID, den Anzeigenamen und den Elementtyp. Auf der folgenden Beispielkarte sehen Sie Grenzen für Verwaltungsgebiete der Stufe 2. Sie enthält Code für die Ereignisbehandlung, mit dem Polygone basierend auf Nutzerinteraktionen formatiert werden (mousemove ändert die Rahmenstärke, click schattiert die Hintergrundfarbe und sorgt dafür, dass ein Infofenster angezeigt wird).

Ereignisse auf Feature-Ebene aktivieren

So aktivieren Sie Ereignisse auf Feature-Ebene:

1. Um eine Feature-Ebene für Ereignisbenachrichtigungen zu konfigurieren, rufen Sie für jedes Ereignis, das Sie registrieren möchten, die Funktion addListener() auf der Feature-Ebene auf. In diesem Beispiel wird auch ein Listener für die Karte hinzugefügt.

   TypeScript

   // Add the feature layer.
   featureLayer = innerMap.getFeatureLayer('ADMINISTRATIVE_AREA_LEVEL_2');
   
   // Add the event listeners for the feature layer.
   featureLayer.addListener('click', handleClick);
   featureLayer.addListener('mousemove', handleMouseMove);
   
   // Map event listener.
   innerMap.addListener('mousemove', () => {
       // If the map gets a mousemove, that means there are no feature layers
       // with listeners registered under the mouse, so we clear the last
       // interacted feature ids.
       if (lastInteractedFeatureIds?.length) {
           lastInteractedFeatureIds = [];
           featureLayer.style = applyStyle;
       }
   });
   index.ts

   Hinweis: Lesen Sie sich hierzu den Leitfaden zur Verwendung von TypeScript und Google Maps durch.

   JavaScript

   // Add the feature layer.
   featureLayer = innerMap.getFeatureLayer('ADMINISTRATIVE_AREA_LEVEL_2');
   
   // Add the event listeners for the feature layer.
   featureLayer.addListener('click', handleClick);
   featureLayer.addListener('mousemove', handleMouseMove);
   
   // Map event listener.
   innerMap.addListener('mousemove', () => {
       // If the map gets a mousemove, that means there are no feature layers
       // with listeners registered under the mouse, so we clear the last
       // interacted feature ids.
       if (lastInteractedFeatureIds?.length) {
           lastInteractedFeatureIds = [];
           featureLayer.style = applyStyle;
       }
   });
   index.js

2. Fügen Sie Code für den Event-Handler hinzu, um das ausgewählte Polygon je nach Art der Interaktion zu gestalten.

   TypeScript

   function handleClick(event: google.maps.FeatureMouseEvent) {
       lastClickedFeatureIds = event.features.map(
           (f) => (f as google.maps.PlaceFeature).placeId
       );
       lastInteractedFeatureIds = [];
       featureLayer.style = applyStyle;
       void createInfoWindow(event);
   }
   
   function handleMouseMove(event: google.maps.FeatureMouseEvent) {
       lastInteractedFeatureIds = event.features.map(
           (f) => (f as google.maps.PlaceFeature).placeId
       );
       featureLayer.style = applyStyle;
   }
   index.ts

   Hinweis: Lesen Sie sich hierzu den Leitfaden zur Verwendung von TypeScript und Google Maps durch.

   JavaScript

   function handleClick(event) {
       lastClickedFeatureIds = event.features.map((f) => f.placeId);
       lastInteractedFeatureIds = [];
       featureLayer.style = applyStyle;
       void createInfoWindow(event);
   }
   
   function handleMouseMove(event) {
       lastInteractedFeatureIds = event.features.map((f) => f.placeId);
       featureLayer.style = applyStyle;
   }
   index.js

3. Verwenden Sie eine Stilfunktion für Elemente, um Stile anzuwenden. Die hier gezeigte Stilfunktion für Elemente wendet den Stil je nach Interaktionstyp an. Hier sind drei Stile definiert: einer, um den Rahmen bei mousemove fett zu machen, einer, um den Hintergrund zu ändern und ein Infofenster bei click anzuzeigen, und ein Standardstil.

   TypeScript

   // Define styles.
   // Stroke and fill with minimum opacity value.
   const styleDefault = {
       strokeColor: '#810FCB',
       strokeOpacity: 1.0,
       strokeWeight: 2.0,
       fillColor: 'white',
       fillOpacity: 0.1, // Polygons must be visible to receive events.
   };
   // Style for the clicked polygon.
   const styleClicked = {
       ...styleDefault,
       fillColor: '#810FCB',
       fillOpacity: 0.5,
   };
   // Style for polygon on mouse move.
   const styleMouseMove = {
       ...styleDefault,
       strokeWeight: 4.0,
   };
   
   // Apply styles using a feature style function.
   function applyStyle(params: google.maps.FeatureStyleFunctionOptions) {
       const placeId = (params.feature as google.maps.PlaceFeature).placeId;
       if (lastClickedFeatureIds.includes(placeId)) {
           return styleClicked;
       }
       if (lastInteractedFeatureIds.includes(placeId)) {
           return styleMouseMove;
       }
       return styleDefault;
   }
   index.ts

   Hinweis: Lesen Sie sich hierzu den Leitfaden zur Verwendung von TypeScript und Google Maps durch.

   JavaScript

   // Define styles.
   // Stroke and fill with minimum opacity value.
   const styleDefault = {
       strokeColor: '#810FCB',
       strokeOpacity: 1.0,
       strokeWeight: 2.0,
       fillColor: 'white',
       fillOpacity: 0.1, // Polygons must be visible to receive events.
   };
   // Style for the clicked polygon.
   const styleClicked = {
       ...styleDefault,
       fillColor: '#810FCB',
       fillOpacity: 0.5,
   };
   // Style for polygon on mouse move.
   const styleMouseMove = {
       ...styleDefault,
       strokeWeight: 4.0,
   };
   
   // Apply styles using a feature style function.
   function applyStyle(params) {
       const placeId = params.feature.placeId;
       if (lastClickedFeatureIds.includes(placeId)) {
           return styleClicked;
       }
       if (lastInteractedFeatureIds.includes(placeId)) {
           return styleMouseMove;
       }
       return styleDefault;
   }
   index.js

Hinweis: Da nur mit sichtbaren Elementen interagiert werden kann, sollte der Standardfüllstil einen fillOpacity-Wert von 0,1 oder höher haben.

Vollständiges Codebeispiel

TypeScript

let innerMap: google.maps.Map;
let featureLayer: google.maps.FeatureLayer;
let infoWindow: google.maps.InfoWindow;
let lastInteractedFeatureIds: string[] = [];
let lastClickedFeatureIds: string[] = [];

function handleClick(event: google.maps.FeatureMouseEvent) {
    lastClickedFeatureIds = event.features.map(
        (f) => (f as google.maps.PlaceFeature).placeId
    );
    lastInteractedFeatureIds = [];
    featureLayer.style = applyStyle;
    void createInfoWindow(event);
}

function handleMouseMove(event: google.maps.FeatureMouseEvent) {
    lastInteractedFeatureIds = event.features.map(
        (f) => (f as google.maps.PlaceFeature).placeId
    );
    featureLayer.style = applyStyle;
}

async function init() {
    // Request needed libraries.
    const { InfoWindow } = await google.maps.importLibrary('maps');

    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map')!;

    // Get the inner map.
    innerMap = mapElement.innerMap;

    // Set map options.
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Add the feature layer.
    featureLayer = innerMap.getFeatureLayer('ADMINISTRATIVE_AREA_LEVEL_2');

    // Add the event listeners for the feature layer.
    featureLayer.addListener('click', handleClick);
    featureLayer.addListener('mousemove', handleMouseMove);

    // Map event listener.
    innerMap.addListener('mousemove', () => {
        // If the map gets a mousemove, that means there are no feature layers
        // with listeners registered under the mouse, so we clear the last
        // interacted feature ids.
        if (lastInteractedFeatureIds?.length) {
            lastInteractedFeatureIds = [];
            featureLayer.style = applyStyle;
        }
    });

    // Create the infoWindow.
    infoWindow = new InfoWindow();
    // Apply style on load, to enable clicking.
    featureLayer.style = applyStyle;
}

// Helper function for the infoWindow.
async function createInfoWindow(event: google.maps.FeatureMouseEvent) {
    const feature = event.features[0] as google.maps.PlaceFeature;
    if (!feature.placeId) return;

    // Update the info window.
    // Get the place instance from the selected feature.
    const place = await feature.fetchPlace();

    // Create a new div to hold the text content.
    const content = document.createElement('div');

    // Get the text values.
    const nameText = document.createElement('span');
    nameText.textContent = `Display name: ${place.displayName}`;
    const placeIdText = document.createElement('span');
    placeIdText.textContent = `Place ID: ${feature.placeId}`;
    const featureTypeText = document.createElement('span');
    featureTypeText.textContent = `Feature type: ${feature.featureType}`;

    // Append the text to the div.
    content.appendChild(nameText);
    content.appendChild(document.createElement('br'));
    content.appendChild(placeIdText);
    content.appendChild(document.createElement('br'));
    content.appendChild(featureTypeText);

    updateInfoWindow(content, event.latLng);
}

// Define styles.
// Stroke and fill with minimum opacity value.
const styleDefault = {
    strokeColor: '#810FCB',
    strokeOpacity: 1.0,
    strokeWeight: 2.0,
    fillColor: 'white',
    fillOpacity: 0.1, // Polygons must be visible to receive events.
};
// Style for the clicked polygon.
const styleClicked = {
    ...styleDefault,
    fillColor: '#810FCB',
    fillOpacity: 0.5,
};
// Style for polygon on mouse move.
const styleMouseMove = {
    ...styleDefault,
    strokeWeight: 4.0,
};

// Apply styles using a feature style function.
function applyStyle(params: google.maps.FeatureStyleFunctionOptions) {
    const placeId = (params.feature as google.maps.PlaceFeature).placeId;
    if (lastClickedFeatureIds.includes(placeId)) {
        return styleClicked;
    }
    if (lastInteractedFeatureIds.includes(placeId)) {
        return styleMouseMove;
    }
    return styleDefault;
}

// Helper function to create an info window.
function updateInfoWindow(
    content: HTMLElement,
    center: google.maps.LatLng | google.maps.LatLngLiteral | null | undefined
) {
    infoWindow.setContent(content);
    infoWindow.setPosition(center);
    infoWindow.open({
        map: innerMap,
        shouldFocus: false,
    });
}

void init();
index.ts

Hinweis: Lesen Sie sich hierzu den Leitfaden zur Verwendung von TypeScript und Google Maps durch.

JavaScript

let innerMap;
let featureLayer;
let infoWindow;
let lastInteractedFeatureIds = [];
let lastClickedFeatureIds = [];

function handleClick(event) {
    lastClickedFeatureIds = event.features.map((f) => f.placeId);
    lastInteractedFeatureIds = [];
    featureLayer.style = applyStyle;
    void createInfoWindow(event);
}

function handleMouseMove(event) {
    lastInteractedFeatureIds = event.features.map((f) => f.placeId);
    featureLayer.style = applyStyle;
}

async function init() {
    // Request needed libraries.
    const { InfoWindow } = await google.maps.importLibrary('maps');

    // Get the gmp-map element.
    const mapElement = document.querySelector('gmp-map');

    // Get the inner map.
    innerMap = mapElement.innerMap;

    // Set map options.
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Add the feature layer.
    featureLayer = innerMap.getFeatureLayer('ADMINISTRATIVE_AREA_LEVEL_2');

    // Add the event listeners for the feature layer.
    featureLayer.addListener('click', handleClick);
    featureLayer.addListener('mousemove', handleMouseMove);

    // Map event listener.
    innerMap.addListener('mousemove', () => {
        // If the map gets a mousemove, that means there are no feature layers
        // with listeners registered under the mouse, so we clear the last
        // interacted feature ids.
        if (lastInteractedFeatureIds?.length) {
            lastInteractedFeatureIds = [];
            featureLayer.style = applyStyle;
        }
    });

    // Create the infoWindow.
    infoWindow = new InfoWindow();
    // Apply style on load, to enable clicking.
    featureLayer.style = applyStyle;
}

// Helper function for the infoWindow.
async function createInfoWindow(event) {
    const feature = event.features[0];
    if (!feature.placeId) return;

    // Update the info window.
    // Get the place instance from the selected feature.
    const place = await feature.fetchPlace();

    // Create a new div to hold the text content.
    const content = document.createElement('div');

    // Get the text values.
    const nameText = document.createElement('span');
    nameText.textContent = `Display name: ${place.displayName}`;
    const placeIdText = document.createElement('span');
    placeIdText.textContent = `Place ID: ${feature.placeId}`;
    const featureTypeText = document.createElement('span');
    featureTypeText.textContent = `Feature type: ${feature.featureType}`;

    // Append the text to the div.
    content.appendChild(nameText);
    content.appendChild(document.createElement('br'));
    content.appendChild(placeIdText);
    content.appendChild(document.createElement('br'));
    content.appendChild(featureTypeText);

    updateInfoWindow(content, event.latLng);
}

// Define styles.
// Stroke and fill with minimum opacity value.
const styleDefault = {
    strokeColor: '#810FCB',
    strokeOpacity: 1.0,
    strokeWeight: 2.0,
    fillColor: 'white',
    fillOpacity: 0.1, // Polygons must be visible to receive events.
};
// Style for the clicked polygon.
const styleClicked = {
    ...styleDefault,
    fillColor: '#810FCB',
    fillOpacity: 0.5,
};
// Style for polygon on mouse move.
const styleMouseMove = {
    ...styleDefault,
    strokeWeight: 4.0,
};

// Apply styles using a feature style function.
function applyStyle(params) {
    const placeId = params.feature.placeId;
    if (lastClickedFeatureIds.includes(placeId)) {
        return styleClicked;
    }
    if (lastInteractedFeatureIds.includes(placeId)) {
        return styleMouseMove;
    }
    return styleDefault;
}

// Helper function to create an info window.
function updateInfoWindow(content, center) {
    infoWindow.setContent(content);
    infoWindow.setPosition(center);
    infoWindow.open({
        map: innerMap,
        shouldFocus: false,
    });
}

void init();
index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
gmp-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>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map
            center="39.23,-105.73"
            zoom="8"
            map-id="8b37d7206ccf0121a2634fd5"></gmp-map>
    </body>
</html>
index.html

Weitere Informationen zu Ereignissen