رویدادهای ماوس را مدیریت کنید

پلتفرم مورد نظر را انتخاب کنید: اندروید، iOS، جاوا اسکریپت

نمای کلی

یک لایه ویژگی ایجاد کنید که به رویدادهای mousemove و click پاسخ دهد و از آنها برای بازگرداندن اطلاعات مربوط به مرزی که کلیک شده است استفاده کنید. این اطلاعات شامل ID، نام نمایشی و نوع ویژگی است. نقشه نمونه زیر مرزهای سطح ۲ ناحیه اداری را نشان می‌دهد و دارای کد مدیریت رویداد است که چندضلعی‌ها را بر اساس تعامل کاربر استایل می‌دهد ( mousemove ضخامت حاشیه را تغییر می‌دهد، click رنگ پس‌زمینه را تیره می‌کند و باعث نمایش یک پنجره اطلاعات می‌شود).

فعال کردن رویدادهای لایه ویژگی

برای فعال کردن رویدادها در یک لایه ویژگی، مراحل زیر را دنبال کنید:

1. با فراخوانی تابع addListener() در لایه ویژگی برای هر رویدادی که می‌خواهید ثبت کنید، یک لایه ویژگی برای اعلان‌های رویداد ثبت کنید. در این مثال، نقشه همچنین یک شنونده (listener) دریافت می‌کند.

   تایپ اسکریپت

   // 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

   نکته: راهنمای استفاده از TypeScript و Google Maps را مطالعه کنید.

   جاوا اسکریپت

   // 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. کد مدیریت رویداد را برای استایل‌دهی به چندضلعی انتخاب‌شده بر اساس نوع تعامل اضافه کنید.

   تایپ اسکریپت

   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

   نکته: راهنمای استفاده از TypeScript و Google Maps را مطالعه کنید.

   جاوا اسکریپت

   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. از یک تابع سبک ویژگی برای اعمال سبک‌ها استفاده کنید. تابع سبک ویژگی نشان داده شده در اینجا، سبک را به صورت شرطی بر اساس نوع تعامل اعمال می‌کند. سه سبک در اینجا تعریف شده است: یکی برای پررنگ کردن حاشیه با mousemove ، یکی برای تغییر پس‌زمینه و نمایش پنجره اطلاعات با click ، و یک سبک پیش‌فرض.

   تایپ اسکریپت

   // 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

   نکته: راهنمای استفاده از TypeScript و Google Maps را مطالعه کنید.

   جاوا اسکریپت

   // 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

نکته: از آنجا که فقط می‌توان با ویژگی‌های قابل مشاهده تعامل داشت، سبک پر کردن پیش‌فرض باید fillOpacity برابر با 0.1 یا بیشتر داشته باشد.

کد مثال کامل

تایپ اسکریپت

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

نکته: راهنمای استفاده از TypeScript و Google Maps را مطالعه کنید.

جاوا اسکریپت

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

نکته: جاوا اسکریپت از قطعه کد TypeScript کامپایل می‌شود.

سی‌اس‌اس

/* 
 * 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>
  <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"});</script>
  </head>
  <body>
    <gmp-map center="39.23,-105.73" zoom="8" map-id="8b37d7206ccf0121a2634fd5">
  </body>
</html>
index.html

نمونه را امتحان کنید

JSFiddle.net

درباره رویدادها بیشتر بدانید