মাউস ইভেন্ট ম্যানেজ করা

প্ল্যাটফর্ম বেছে নিন: Android iOS JavaScript

mousemove এবং click ইভেন্টে ডেটা ফিচারকে রেসপন্ড করতে দিন এবং ব্যবহারকারীর ইন্টার‍্যাকশনের উপর ভিত্তি করে ফিচারের চেহারা পরিবর্তন করতে সেগুলি ব্যবহার করুন।

ডেটাসেট লেয়ার ইভেন্ট চালু করুন

ডেটাসেট লেয়ারে ইভেন্ট চালু করতে নিম্নলিখিত ধাপগুলি অনুসরণ করুন:

1. আপনি রেজিস্টার করতে চান এমন প্রতিটি ইভেন্টের জন্য ডেটাসেট লেয়ারে addListener() ফাংশন কল করে ইভেন্ট বিজ্ঞপ্তির জন্য একটি ডেটাসেট লেয়ার রেজিস্টার করুন। এই উদাহরণে, ম্যাপেও একটি লিসেনার যোগ করা হয়েছে।

   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

   মনে রাখবেন: TypeScript ও Google Maps ব্যবহার করার বিষয়ে গাইড পড়ুন।

   জাভাস্ক্রিপ্ট

   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. ইন্টার‍্যাকশনের ধরনের উপর ভিত্তি করে বেছে নেওয়া ফিচার স্টাইল করতে ইভেন্ট হ্যান্ডলার কোড যোগ করুন।

   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

   মনে রাখবেন: TypeScript ও Google Maps ব্যবহার করার বিষয়ে গাইড পড়ুন।

   জাভাস্ক্রিপ্ট

   // 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. স্টাইল প্রয়োগ করতে ফিচার স্টাইল ফাংশন ব্যবহার করুন। এখানে দেখানো ফিচার স্টাইল ফাংশন ইন্টার‍্যাকশনের ধরনের উপর ভিত্তি করে শর্তসাপেক্ষে স্টাইল প্রয়োগ করে। এখানে তিনটি স্টাইল সংজ্ঞায়িত করা হয়েছে: একটি mousemove-এ বর্ডার বোল্ড করার জন্য, একটি click-এ ব্যাকগ্রাউন্ড পরিবর্তন করার জন্য এবং একটি ডিফল্ট স্টাইল।

   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

   মনে রাখবেন: TypeScript ও Google Maps ব্যবহার করার বিষয়ে গাইড পড়ুন।

   জাভাস্ক্রিপ্ট

   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

সম্পূর্ণ উদাহরণ কোড

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

মনে রাখবেন: TypeScript ও Google Maps ব্যবহার করার বিষয়ে গাইড পড়ুন।

জাভাস্ক্রিপ্ট

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