Menangani peristiwa mouse

Pilih platform: iOS JavaScript

Ringkasan

Buat lapisan fitur merespons peristiwa mousemove dan click, lalu gunakan keduanya untuk menampilkan informasi tentang batas yang diklik. Informasi ini mencakup ID, nama tampilan, dan jenis fitur. Contoh peta berikut menunjukkan batas untuk Wilayah Administratif Level 2, dan memiliki kode penanganan peristiwa yang menata gaya poligon berdasarkan interaksi pengguna (mousemove mengubah ketebalan batas, click memberi bayangan warna latar belakang dan menyebabkan jendela info ditampilkan).

Mengaktifkan peristiwa lapisan fitur

Lakukan langkah-langkah berikut untuk mengaktifkan peristiwa di lapisan fitur:

1. Daftarkan lapisan fitur untuk notifikasi peristiwa dengan memanggil fungsi addListener() di lapisan fitur untuk setiap peristiwa yang ingin Anda daftarkan. Dalam contoh ini, peta juga mendapatkan pemroses.

   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

   Catatan: Baca panduan cara menggunakan TypeScript dan 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. Tambahkan kode pengendali peristiwa untuk menata gaya poligon yang dipilih berdasarkan jenis interaksi.

   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

   Catatan: Baca panduan cara menggunakan TypeScript dan 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. Gunakan fungsi gaya fitur untuk menerapkan gaya. Fungsi gaya fitur yang ditampilkan di sini menerapkan gaya secara bersyarat berdasarkan jenis interaksi. Tiga gaya ditentukan di sini: satu untuk membuat batas tebal di mousemove, satu untuk mengubah latar belakang dan menampilkan jendela info di click, dan gaya default.

   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

   Catatan: Baca panduan cara menggunakan TypeScript dan 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

Catatan: Karena hanya fitur yang terlihat yang dapat berinteraksi, gaya pengisian default harus memiliki fillOpacity 0,1 atau yang lebih besar.

Kode contoh lengkap

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

Catatan: Baca panduan cara menggunakan TypeScript dan 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

Catatan: JavaScript dikompilasi dari cuplikan 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>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <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

Mencoba Contoh

JSFiddle.net Google Cloud Shell

Pelajari peristiwa lebih lanjut