Fai in modo che le funzionalità relative ai dati rispondano agli eventi mousemove
e click
e usale per
Modificare l'aspetto di una funzionalità in base all'interazione dell'utente.
Abilita eventi a livello del set di dati
Segui questi passaggi per abilitare gli eventi a livello del set di dati:
Registra un livello del set di dati per le notifiche degli eventi richiamando il metodo
addListener()
a livello del set di dati per ogni evento da creare registro. In questo esempio la mappa riceve anche un listener.TypeScript
datasetLayer = map.getDatasetFeatureLayer(datasetId); datasetLayer.style = applyStyle; datasetLayer.addListener('click', handleClick); datasetLayer.addListener('mousemove', handleMouseMove); // Map event listener. map.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 = map.getDatasetFeatureLayer(datasetId); datasetLayer.style = applyStyle; datasetLayer.addListener("click", handleClick); datasetLayer.addListener("mousemove", handleMouseMove); // Map event listener. map.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; } });
Aggiungi il codice del gestore di eventi per definire lo stile dell'elemento selezionato in base al tipo di un'interazione.
TypeScript
// Note, 'globalid' is an attribute in this Dataset. function handleClick(/* MouseEvent */ e) { if (e.features) { lastClickedFeatureIds = e.features.map((f) => f.datasetAttributes['globalid']); } //@ts-ignore datasetLayer.style = applyStyle; } function handleMouseMove(/* MouseEvent */ e) { if (e.features) { lastInteractedFeatureIds = e.features.map((f) => f.datasetAttributes['globalid']); } //@ts-ignore datasetLayer.style = applyStyle; }
JavaScript
// Note, 'globalid' is an attribute in this Dataset. function handleClick(/* MouseEvent */ e) { if (e.features) { lastClickedFeatureIds = e.features.map( (f) => f.datasetAttributes["globalid"], ); } //@ts-ignore datasetLayer.style = applyStyle; } function handleMouseMove(/* MouseEvent */ e) { if (e.features) { lastInteractedFeatureIds = e.features.map( (f) => f.datasetAttributes["globalid"], ); } //@ts-ignore datasetLayer.style = applyStyle; }
Utilizza una funzione di stile delle caratteristiche per applicare gli stili. La funzione di stile delle caratteristiche mostrato qui applica lo stile in modo condizionale in base al tipo di interazione. Tre. gli stili sono definiti qui: uno per applicare il bordo in grassetto su
mousemove
, uno per cambia lo sfondo suclick
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(/* FeatureStyleFunctionOptions */ params) { const datasetFeature = params.feature; // Note, 'globalid' is an attribute in this dataset. //@ts-ignore if (lastClickedFeatureIds.includes(datasetFeature.datasetAttributes['globalid'])) { return styleClicked; } //@ts-ignore if (lastInteractedFeatureIds.includes(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(/* FeatureStyleFunctionOptions */ params) { const datasetFeature = params.feature; // Note, 'globalid' is an attribute in this dataset. //@ts-ignore if ( lastClickedFeatureIds.includes(datasetFeature.datasetAttributes["globalid"]) ) { return styleClicked; } //@ts-ignore if ( lastInteractedFeatureIds.includes( datasetFeature.datasetAttributes["globalid"], ) ) { return styleMouseMove; } return styleDefault; }
Codice di esempio completo
TypeScript
let map: google.maps.Map; let lastInteractedFeatureIds = []; let lastClickedFeatureIds = []; let datasetLayer; // Note, 'globalid' is an attribute in this Dataset. function handleClick(/* MouseEvent */ e) { if (e.features) { lastClickedFeatureIds = e.features.map((f) => f.datasetAttributes['globalid']); } //@ts-ignore datasetLayer.style = applyStyle; } function handleMouseMove(/* MouseEvent */ e) { if (e.features) { lastInteractedFeatureIds = e.features.map((f) => f.datasetAttributes['globalid']); } //@ts-ignore datasetLayer.style = applyStyle; } async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary('maps') as google.maps.MapsLibrary; const position = {lat: 40.780101, lng: -73.967780}; map = new Map(document.getElementById('map') as HTMLElement, { zoom: 13, center: position, mapId: 'b98e588c46685dd7', mapTypeControl: false, }); // Dataset ID for NYC park data. const datasetId = '6fe13aa9-b900-45e7-b636-3236672c3f4f'; //@ts-ignore datasetLayer = map.getDatasetFeatureLayer(datasetId); datasetLayer.style = applyStyle; datasetLayer.addListener('click', handleClick); datasetLayer.addListener('mousemove', handleMouseMove); // Map event listener. map.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 attributionDiv = document.createElement('div'); const attributionControl = createAttribution(map); attributionDiv.appendChild(attributionControl); map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv); } 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(/* FeatureStyleFunctionOptions */ params) { const datasetFeature = params.feature; // Note, 'globalid' is an attribute in this dataset. //@ts-ignore if (lastClickedFeatureIds.includes(datasetFeature.datasetAttributes['globalid'])) { return styleClicked; } //@ts-ignore if (lastInteractedFeatureIds.includes(datasetFeature.datasetAttributes['globalid'])) { return styleMouseMove; } return styleDefault; } function createAttribution(map) { const attributionLabel = document.createElement('div'); // Define CSS styles. attributionLabel.style.backgroundColor = '#fff'; attributionLabel.style.opacity = '0.7'; attributionLabel.style.fontFamily = 'Roboto,Arial,sans-serif'; attributionLabel.style.fontSize = '10px'; attributionLabel.style.padding = '2px'; attributionLabel.style.margin = '2px'; attributionLabel.textContent = 'Data source: NYC Open Data'; return attributionLabel; } initMap();
JavaScript
let map; let lastInteractedFeatureIds = []; let lastClickedFeatureIds = []; let datasetLayer; // Note, 'globalid' is an attribute in this Dataset. function handleClick(/* MouseEvent */ e) { if (e.features) { lastClickedFeatureIds = e.features.map( (f) => f.datasetAttributes["globalid"], ); } //@ts-ignore datasetLayer.style = applyStyle; } function handleMouseMove(/* MouseEvent */ e) { if (e.features) { lastInteractedFeatureIds = e.features.map( (f) => f.datasetAttributes["globalid"], ); } //@ts-ignore datasetLayer.style = applyStyle; } async function initMap() { // Request needed libraries. const { Map } = await google.maps.importLibrary("maps"); const position = { lat: 40.780101, lng: -73.96778 }; map = new Map(document.getElementById("map"), { zoom: 13, center: position, mapId: "b98e588c46685dd7", mapTypeControl: false, }); // Dataset ID for NYC park data. const datasetId = "6fe13aa9-b900-45e7-b636-3236672c3f4f"; //@ts-ignore datasetLayer = map.getDatasetFeatureLayer(datasetId); datasetLayer.style = applyStyle; datasetLayer.addListener("click", handleClick); datasetLayer.addListener("mousemove", handleMouseMove); // Map event listener. map.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 attributionDiv = document.createElement("div"); const attributionControl = createAttribution(map); attributionDiv.appendChild(attributionControl); map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv); } 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(/* FeatureStyleFunctionOptions */ params) { const datasetFeature = params.feature; // Note, 'globalid' is an attribute in this dataset. //@ts-ignore if ( lastClickedFeatureIds.includes(datasetFeature.datasetAttributes["globalid"]) ) { return styleClicked; } //@ts-ignore if ( lastInteractedFeatureIds.includes( datasetFeature.datasetAttributes["globalid"], ) ) { return styleMouseMove; } return styleDefault; } function createAttribution(map) { const attributionLabel = document.createElement("div"); // Define CSS styles. attributionLabel.style.backgroundColor = "#fff"; attributionLabel.style.opacity = "0.7"; attributionLabel.style.fontFamily = "Roboto,Arial,sans-serif"; attributionLabel.style.fontSize = "10px"; attributionLabel.style.padding = "2px"; attributionLabel.style.margin = "2px"; attributionLabel.textContent = "Data source: NYC Open Data"; return attributionLabel; } initMap();