Mausereignisse verarbeiten

Plattform auswählen: Android iOS JavaScript

Übersicht

Sie können eine Feature-Ebene so konfigurieren, dass sie auf mousemove- und click-Ereignisse reagiert und Informationen zur angeklickten Grenze zurückgibt. Zu diesen Informationen gehören die ID, der Anzeigename und der Featuretyp. Auf der folgenden Beispielkarte sehen Sie Grenzen für Verwaltungsgebiete der Stufe 2. Sie enthält Event-Handler-Code, mit dem Polygone basierend auf der Nutzerinteraktion gestaltet werden (mousemove ändert die Strichstärke der Grenze, click ändert die Hintergrundfarbe und zeigt ein Infofenster an).

Ereignisse auf Feature-Ebene aktivieren

So aktivieren Sie Ereignisse auf Feature-Ebene:

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

    TypeScript

    // Add the feature layer.
featureLayer = innerMap.getFeatureLayer(
    google.maps.FeatureType.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

    JavaScript

    // Add the feature layer.
featureLayer = innerMap.getFeatureLayer(google.maps.FeatureType.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 Event-Handler-Code hinzu, um das ausgewählte Polygon basierend auf der Art der Interaktion zu gestalten.

    TypeScript

    function handleClick(/* MouseEvent */ e) {
    lastClickedFeatureIds = e.features.map((f) => f.placeId);
    lastInteractedFeatureIds = [];
    featureLayer.style = applyStyle;
    createInfoWindow(e);
}

function handleMouseMove(/* MouseEvent */ e) {
    lastInteractedFeatureIds = e.features.map((f) => f.placeId);
    featureLayer.style = applyStyle;
}
    index.ts

    JavaScript

    function handleClick(/* MouseEvent */ e) {
    lastClickedFeatureIds = e.features.map((f) => f.placeId);
    lastInteractedFeatureIds = [];
    featureLayer.style = applyStyle;
    createInfoWindow(e);
}
function handleMouseMove(/* MouseEvent */ e) {
    lastInteractedFeatureIds = e.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 Stile bedingt basierend auf der Art der Interaktion an. Hier sind drei Stile definiert: einer, um die Grenze bei mousemove fett zu machen, einer, um den Hintergrund zu ändern und bei click ein Infofenster 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(/* FeatureStyleFunctionOptions */ params) {
    const placeId = params.feature.placeId;
    //@ts-ignore
    if (lastClickedFeatureIds.includes(placeId)) {
        return styleClicked;
    }
    //@ts-ignore
    if (lastInteractedFeatureIds.includes(placeId)) {
        return styleMouseMove;
    }
    return styleDefault;
}
    index.ts

    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(/* FeatureStyleFunctionOptions */ params) {
    const placeId = params.feature.placeId;
    //@ts-ignore
    if (lastClickedFeatureIds.includes(placeId)) {
        return styleClicked;
    }
    //@ts-ignore
    if (lastInteractedFeatureIds.includes(placeId)) {
        return styleMouseMove;
    }
    return styleDefault;
}
    index.js

Vollständiges Codebeispiel

TypeScript

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

function handleClick(/* MouseEvent */ e) {
    lastClickedFeatureIds = e.features.map((f) => f.placeId);
    lastInteractedFeatureIds = [];
    featureLayer.style = applyStyle;
    createInfoWindow(e);
}

function handleMouseMove(/* MouseEvent */ e) {
    lastInteractedFeatureIds = e.features.map((f) => f.placeId);
    featureLayer.style = applyStyle;
}

async function initMap() {
    // Request needed libraries.
    const { Map, InfoWindow } = (await google.maps.importLibrary(
        'maps'
    )) as google.maps.MapsLibrary;

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

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

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

    // Add the feature layer.
    featureLayer = innerMap.getFeatureLayer(
        google.maps.FeatureType.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) {
    let 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.
    let content = document.createElement('div');

    // Get the text values.
    let nameText = document.createElement('span');
    nameText.textContent = `Display name: ${place.displayName}`;
    let placeIdText = document.createElement('span');
    placeIdText.textContent = `Place ID: ${feature.placeId}`;
    let 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(/* FeatureStyleFunctionOptions */ params) {
    const placeId = params.feature.placeId;
    //@ts-ignore
    if (lastClickedFeatureIds.includes(placeId)) {
        return styleClicked;
    }
    //@ts-ignore
    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,
    });
}

initMap();
index.ts

JavaScript

let innerMap;
let featureLayer;
let infoWindow;
let lastInteractedFeatureIds = [];
let lastClickedFeatureIds = [];
function handleClick(/* MouseEvent */ e) {
    lastClickedFeatureIds = e.features.map((f) => f.placeId);
    lastInteractedFeatureIds = [];
    featureLayer.style = applyStyle;
    createInfoWindow(e);
}
function handleMouseMove(/* MouseEvent */ e) {
    lastInteractedFeatureIds = e.features.map((f) => f.placeId);
    featureLayer.style = applyStyle;
}
async function initMap() {
    // Request needed libraries.
    const { Map, 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(google.maps.FeatureType.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) {
    let 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.
    let content = document.createElement('div');
    // Get the text values.
    let nameText = document.createElement('span');
    nameText.textContent = `Display name: ${place.displayName}`;
    let placeIdText = document.createElement('span');
    placeIdText.textContent = `Place ID: ${feature.placeId}`;
    let 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(/* FeatureStyleFunctionOptions */ params) {
    const placeId = params.feature.placeId;
    //@ts-ignore
    if (lastClickedFeatureIds.includes(placeId)) {
        return styleClicked;
    }
    //@ts-ignore
    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,
    });
}
initMap();
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>
        <!-- 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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly", internalUsageAttributionIds: "gmp_git_jsapisamples_v1_data-driven-styling" });</script>
    </head>
    <body>
        <gmp-map
            center="39.23,-105.73"
            zoom="8"
            map-id="8b37d7206ccf0121a2634fd5"></gmp-map>
    </body>
</html>
index.html

Testbeispiel

Weitere Informationen zu Ereignissen