마우스 이벤트 처리

플랫폼 선택: Android iOS JavaScript

개요

지형지물 레이어가 mousemove 및 click 이벤트에 응답하도록 하고 이를 사용하여 클릭된 경계에 관한 정보를 반환합니다. 이 정보에는 ID, 표시 이름, 지형지물 유형이 포함됩니다. 다음 예시 지도에는 행정 구역 수준 2의 경계가 표시되어 있으며 사용자 상호작용에 따라 다각형의 스타일을 지정하는 이벤트 처리 코드가 있습니다 (mousemove는 테두리 두께를 변경하고 click는 배경 색상을 음영 처리하며 정보 창을 표시함).

지형지물 레이어 이벤트 사용 설정

다음 단계에 따라 지형지물 레이어에서 이벤트를 사용 설정합니다.

1. 등록하려는 각 이벤트의 지형지물 레이어에서 addListener() 함수를 호출하여 이벤트 알림에 사용할 지형지물 레이어를 등록합니다. 이 예에서는 지도도 리스너를 가져옵니다.

   TypeScript

   // Add the feature layer.
   //@ts-ignore
   featureLayer = map.getFeatureLayer('ADMINISTRATIVE_AREA_LEVEL_2');
   
   // Add the event listeners for the feature layer.
   featureLayer.addListener('click', handleClick);
   featureLayer.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 = [];
       featureLayer.style = applyStyle;
     }
   });
   index.ts

   참고: TypeScript 및 Google 지도 사용에 관한 가이드를 읽어 보세요.

   자바스크립트

   // Add the feature layer.
   //@ts-ignore
   featureLayer = map.getFeatureLayer("ADMINISTRATIVE_AREA_LEVEL_2");
   // Add the event listeners for the feature layer.
   featureLayer.addListener("click", handleClick);
   featureLayer.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 = [];
       featureLayer.style = applyStyle;
     }
   });
   index.js

2. 상호작용 유형에 따라 선택한 다각형의 스타일을 지정하는 이벤트 핸들러 코드를 추가합니다.

   TypeScript

   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 지도 사용에 관한 가이드를 읽어 보세요.

   자바스크립트

   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에서 배경을 변경하고 정보 창을 표시하는 스타일, 기본 스타일 등 세 가지 스타일이 정의됩니다.

   TypeScript

   // 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 지도 사용에 관한 가이드를 읽어 보세요.

   자바스크립트

   // 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 이상이어야 합니다.

예시 코드 작성

TypeScript

let map: google.maps.Map;
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;

  map = new Map(document.getElementById('map') as HTMLElement, {
    center: {lat: 39.23, lng: -105.73},
    zoom: 8,
    // In the cloud console, configure your Map ID with a style that enables the
    // 'Administrative Area Level 2' Data Driven Styling type.
    mapId: 'a3efe1c035bad51b', // Substitute your own map ID.
    mapTypeControl: false,
  });

  // Add the feature layer.
  //@ts-ignore
  featureLayer = map.getFeatureLayer('ADMINISTRATIVE_AREA_LEVEL_2');

  // Add the event listeners for the feature layer.
  featureLayer.addListener('click', handleClick);
  featureLayer.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 = [];
      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 infowindow.
  const place = await feature.fetchPlace();
  let content =
      '<span style="font-size:small">Display name: ' + place.displayName +
      '<br/> Place ID: ' + feature.placeId +
      '<br/> Feature type: ' + feature.featureType + '</span>';

  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,
    shouldFocus: false,
  });
}

initMap();
index.ts

참고: TypeScript 및 Google 지도 사용에 관한 가이드를 읽어 보세요.

JavaScript

let map;
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");

  map = new Map(document.getElementById("map"), {
    center: { lat: 39.23, lng: -105.73 },
    zoom: 8,
    // In the cloud console, configure your Map ID with a style that enables the
    // 'Administrative Area Level 2' Data Driven Styling type.
    mapId: "a3efe1c035bad51b", // Substitute your own map ID.
    mapTypeControl: false,
  });
  // Add the feature layer.
  //@ts-ignore
  featureLayer = map.getFeatureLayer("ADMINISTRATIVE_AREA_LEVEL_2");
  // Add the event listeners for the feature layer.
  featureLayer.addListener("click", handleClick);
  featureLayer.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 = [];
      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 infowindow.
  const place = await feature.fetchPlace();
  let content =
    '<span style="font-size:small">Display name: ' +
    place.displayName +
    "<br/> Place ID: " +
    feature.placeId +
    "<br/> Feature type: " +
    feature.featureType +
    "</span>";

  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,
    shouldFocus: false,
  });
}

initMap();
index.js

참고: JavaScript는 TypeScript 스니펫에서 컴파일됩니다.

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
  height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
style.css

HTML

<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>
  </head>
  <body>
    <div id="map"></div>

    <!-- 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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
  </body>
</html>
index.html

샘플 사용해 보기

JSFiddle.net Google Cloud Shell

이벤트에 대해 자세히 알아보기