Fare etkinliklerini işleme

Platform seçin: Android iOS JavaScript

Veri özelliklerinin mousemove ve click etkinliklerine yanıt vermesini sağlayın ve bunları, kullanıcı etkileşimine göre bir özelliğin görünümünü değiştirmek için kullanın.

Veri kümesi katmanı etkinliklerini etkinleştirme

Bir veri kümesi katmanında etkinlikleri etkinleştirmek için aşağıdaki adımları uygulayın:

1. Kaydetmek istediğiniz her etkinlik için veri kümesi katmanında addListener() işlevini çağırarak etkinlik bildirimleri için bir veri kümesi katmanı kaydedin. Bu örnekte, harita da bir dinleyici kazanır.

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

   Not: TypeScript ve Google Haritalar'ı kullanmayla ilgili kılavuzu okuyun.

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

2. Seçilen özelliği etkileşim türüne göre biçimlendirmek için etkinlik işleyici kodu ekleyin.

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

   Not: TypeScript ve Google Haritalar'ı kullanmayla ilgili kılavuzu okuyun.

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

3. Stil uygulamak için bir özellik stili işlevi kullanın. Burada gösterilen özellik stili işlevi, etkileşim türüne göre koşullu olarak stil uygular. Burada üç stil tanımlanmıştır: mousemove için kenarlığı kalınlaştıran bir stil, click için arka planı değiştiren bir stil ve varsayılan bir stil.

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

   Not: TypeScript ve Google Haritalar'ı kullanmayla ilgili kılavuzu okuyun.

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

Eksiksiz örnek kod

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

Not: TypeScript ve Google Haritalar'ı kullanmayla ilgili kılavuzu okuyun.

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