จัดการเหตุการณ์เมาส์

เลือกแพลตฟอร์ม Android iOS JavaScript

ภาพรวม

ทําให้เลเยอร์องค์ประกอบตอบสนองต่อเหตุการณ์ mousemove และ click และใช้เหตุการณ์เหล่านั้นเพื่อแสดงข้อมูลเกี่ยวกับขอบเขตที่คลิก ซึ่งข้อมูลนี้ประกอบด้วยรหัส ชื่อที่แสดง และประเภทฟีเจอร์ แผนที่ตัวอย่างต่อไปนี้แสดงขอบเขตของเขตบริหารระดับ 2 และมีโค้ดการจัดการเหตุการณ์ที่กำหนดรูปแบบรูปหลายเหลี่ยมตามการโต้ตอบของผู้ใช้ (mousemove เปลี่ยนความหนาของเส้นขอบ click แรเงาสีพื้นหลัง และทำให้หน้าต่างข้อมูลแสดงขึ้น)

เปิดใช้เหตุการณ์เลเยอร์ฟีเจอร์

ทําตามขั้นตอนต่อไปนี้เพื่อเปิดใช้เหตุการณ์ในเลเยอร์องค์ประกอบ

1. ลงทะเบียนเลเยอร์ฟีเจอร์สำหรับการแจ้งเตือนเหตุการณ์โดยการเรียกใช้ฟังก์ชัน addListener() ในเลเยอร์ฟีเจอร์สำหรับเหตุการณ์แต่ละรายการที่ต้องการลงทะเบียน ในตัวอย่างนี้ แผนที่ยังมี Listener ด้วย

   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 Maps

   JavaScript

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

   JavaScript

   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. ใช้ฟังก์ชันสไตล์องค์ประกอบเพื่อใช้สไตล์ ฟังก์ชันสไตล์องค์ประกอบที่แสดงที่นี่จะใช้สไตล์ตามเงื่อนไขโดยอิงตามประเภทของการโต้ตอบ มีการกำหนดรูปแบบ 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 Maps

   JavaScript

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

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับเหตุการณ์