Gestire gli eventi del mouse

Seleziona la piattaforma: Android iOS JavaScript

Fai in modo che le caratteristiche dei dati rispondano agli eventi mousemove e click e utilizzale per modificare l'aspetto di una caratteristica in base all'interazione dell'utente.

Attiva gli eventi del livello del set di dati

Per attivare gli eventi su un livello del set di dati, segui questi passaggi:

  1. Registra un livello del set di dati per le notifiche di un evento chiamando la funzione addListener() sul livello del set di dati per ogni evento che vuoi registrare. In questo esempio, alla mappa viene aggiunto anche un listener.

    TypeScript

    datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);
datasetLayer.style = applyStyle;

datasetLayer.addListener('click', handleClick);
datasetLayer.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 = [];
        datasetLayer.style = applyStyle;
    }
});

    JavaScript

    datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);
datasetLayer.style = applyStyle;

datasetLayer.addListener('click', handleClick);
datasetLayer.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 = [];
        datasetLayer.style = applyStyle;
    }
});

  2. Aggiungi il codice del gestore di eventi per applicare uno stile alla caratteristica selezionata in base al tipo di interazione.

    TypeScript

    // Note, 'globalid' is an attribute in this Dataset.
function handleClick(event: google.maps.FeatureMouseEvent) {
    if (event.features) {
        lastClickedFeatureIds = event.features.map(
            (f) => (f as google.maps.DatasetFeature).datasetAttributes.globalid
        );
    }
    datasetLayer.style = applyStyle;
}

function handleMouseMove(event: google.maps.FeatureMouseEvent) {
    if (event.features) {
        lastInteractedFeatureIds = event.features.map(
            (f) => (f as google.maps.DatasetFeature).datasetAttributes.globalid
        );
    }
    datasetLayer.style = applyStyle;
}

    JavaScript

    // Note, 'globalid' is an attribute in this Dataset.
function handleClick(event) {
    if (event.features) {
        lastClickedFeatureIds = event.features.map(
            (f) => f.datasetAttributes.globalid
        );
    }
    datasetLayer.style = applyStyle;
}

function handleMouseMove(event) {
    if (event.features) {
        lastInteractedFeatureIds = event.features.map(
            (f) => f.datasetAttributes.globalid
        );
    }
    datasetLayer.style = applyStyle;
}

  3. Utilizza una funzione di stile degli elementi per applicare gli stili. La funzione di stile degli elementi mostrata qui applica lo stile in modo condizionale in base al tipo di interazione. Qui sono definiti tre stili: uno per applicare il grassetto al bordo su mousemove, uno per modificare lo sfondo su click e uno stile predefinito.

    TypeScript

    const styleDefault = {
    strokeColor: 'green',
    strokeWeight: 2.0,
    strokeOpacity: 1.0,
    fillColor: 'green',
    fillOpacity: 0.3,
};

const styleClicked = {
    ...styleDefault,
    strokeColor: 'blue',
    fillColor: 'blue',
    fillOpacity: 0.5,
};

const styleMouseMove = {
    ...styleDefault,
    strokeWeight: 4.0,
};

function applyStyle(params: google.maps.FeatureStyleFunctionOptions) {
    const datasetFeature = params.feature;

    // Note, 'globalid' is an attribute in this dataset.
    if (
        lastClickedFeatureIds.includes(
            (datasetFeature as google.maps.DatasetFeature).datasetAttributes
                .globalid
        )
    ) {
        return styleClicked;
    }

    if (
        lastInteractedFeatureIds.includes(
            (datasetFeature as google.maps.DatasetFeature).datasetAttributes
                .globalid
        )
    ) {
        return styleMouseMove;
    }
    return styleDefault;
}

    JavaScript

    const styleDefault = {
    strokeColor: 'green',
    strokeWeight: 2.0,
    strokeOpacity: 1.0,
    fillColor: 'green',
    fillOpacity: 0.3,
};

const styleClicked = {
    ...styleDefault,
    strokeColor: 'blue',
    fillColor: 'blue',
    fillOpacity: 0.5,
};

const styleMouseMove = {
    ...styleDefault,
    strokeWeight: 4.0,
};

function applyStyle(params) {
    const datasetFeature = params.feature;

    // Note, 'globalid' is an attribute in this dataset.
    if (
        lastClickedFeatureIds.includes(
            datasetFeature.datasetAttributes.globalid
        )
    ) {
        return styleClicked;
    }

    if (
        lastInteractedFeatureIds.includes(
            datasetFeature.datasetAttributes.globalid
        )
    ) {
        return styleMouseMove;
    }
    return styleDefault;
}

Codice di esempio completo

TypeScript

const mapElement = document.querySelector('gmp-map')!;
let innerMap: google.maps.Map;
let lastInteractedFeatureIds: string[] = [];
let lastClickedFeatureIds: string[] = [];
let datasetLayer: google.maps.FeatureLayer;

// Note, 'globalid' is an attribute in this Dataset.
function handleClick(event: google.maps.FeatureMouseEvent) {
    if (event.features) {
        lastClickedFeatureIds = event.features.map(
            (f) => (f as google.maps.DatasetFeature).datasetAttributes.globalid
        );
    }
    datasetLayer.style = applyStyle;
}

function handleMouseMove(event: google.maps.FeatureMouseEvent) {
    if (event.features) {
        lastInteractedFeatureIds = event.features.map(
            (f) => (f as google.maps.DatasetFeature).datasetAttributes.globalid
        );
    }
    datasetLayer.style = applyStyle;
}

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

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

    // Dataset ID for NYC park data.
    const datasetId = 'a75dd002-ad20-4fe6-af60-27cd2ed636b4';

    datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);
    datasetLayer.style = applyStyle;

    datasetLayer.addListener('click', handleClick);
    datasetLayer.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 = [];
            datasetLayer.style = applyStyle;
        }
    });
}

const styleDefault = {
    strokeColor: 'green',
    strokeWeight: 2.0,
    strokeOpacity: 1.0,
    fillColor: 'green',
    fillOpacity: 0.3,
};

const styleClicked = {
    ...styleDefault,
    strokeColor: 'blue',
    fillColor: 'blue',
    fillOpacity: 0.5,
};

const styleMouseMove = {
    ...styleDefault,
    strokeWeight: 4.0,
};

function applyStyle(params: google.maps.FeatureStyleFunctionOptions) {
    const datasetFeature = params.feature;

    // Note, 'globalid' is an attribute in this dataset.
    if (
        lastClickedFeatureIds.includes(
            (datasetFeature as google.maps.DatasetFeature).datasetAttributes
                .globalid
        )
    ) {
        return styleClicked;
    }

    if (
        lastInteractedFeatureIds.includes(
            (datasetFeature as google.maps.DatasetFeature).datasetAttributes
                .globalid
        )
    ) {
        return styleMouseMove;
    }
    return styleDefault;
}

void init();

JavaScript

const mapElement = document.querySelector('gmp-map');
let innerMap;
let lastInteractedFeatureIds = [];
let lastClickedFeatureIds = [];
let datasetLayer;

// Note, 'globalid' is an attribute in this Dataset.
function handleClick(event) {
    if (event.features) {
        lastClickedFeatureIds = event.features.map(
            (f) => f.datasetAttributes.globalid
        );
    }
    datasetLayer.style = applyStyle;
}

function handleMouseMove(event) {
    if (event.features) {
        lastInteractedFeatureIds = event.features.map(
            (f) => f.datasetAttributes.globalid
        );
    }
    datasetLayer.style = applyStyle;
}

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

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

    // Dataset ID for NYC park data.
    const datasetId = 'a75dd002-ad20-4fe6-af60-27cd2ed636b4';

    datasetLayer = innerMap.getDatasetFeatureLayer(datasetId);
    datasetLayer.style = applyStyle;

    datasetLayer.addListener('click', handleClick);
    datasetLayer.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 = [];
            datasetLayer.style = applyStyle;
        }
    });
}

const styleDefault = {
    strokeColor: 'green',
    strokeWeight: 2.0,
    strokeOpacity: 1.0,
    fillColor: 'green',
    fillOpacity: 0.3,
};

const styleClicked = {
    ...styleDefault,
    strokeColor: 'blue',
    fillColor: 'blue',
    fillOpacity: 0.5,
};

const styleMouseMove = {
    ...styleDefault,
    strokeWeight: 4.0,
};

function applyStyle(params) {
    const datasetFeature = params.feature;

    // Note, 'globalid' is an attribute in this dataset.
    if (
        lastClickedFeatureIds.includes(
            datasetFeature.datasetAttributes.globalid
        )
    ) {
        return styleClicked;
    }

    if (
        lastInteractedFeatureIds.includes(
            datasetFeature.datasetAttributes.globalid
        )
    ) {
        return styleMouseMove;
    }
    return styleDefault;
}

void init();