Menangani peristiwa mouse

Pilih platform: Android iOS JavaScript

Buat fitur data merespons peristiwa mousemove dan click, lalu gunakan untuk mengubah tampilan fitur berdasarkan interaksi pengguna.

Mengaktifkan peristiwa lapisan set data

Lakukan langkah-langkah berikut untuk mengaktifkan peristiwa di lapisan set data:

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

   TypeScript

   datasetLayer = map.getDatasetFeatureLayer(datasetId);
   datasetLayer.style = applyStyle;
   
   datasetLayer.addListener('click', handleClick);
   datasetLayer.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 = [];
       datasetLayer.style = applyStyle;
     }
   });
   index.ts

   Catatan: Baca panduan cara menggunakan TypeScript dan Google Maps.

   JavaScript

   datasetLayer = map.getDatasetFeatureLayer(datasetId);
   datasetLayer.style = applyStyle;
   datasetLayer.addListener("click", handleClick);
   datasetLayer.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 = [];
       datasetLayer.style = applyStyle;
     }
   });
   index.js

2. Tambahkan kode pengendali peristiwa untuk menata gaya fitur yang dipilih berdasarkan jenis interaksi.

   TypeScript

   // Note, 'globalid' is an attribute in this Dataset.
   function handleClick(/* MouseEvent */ e) {
     if (e.features) {
       lastClickedFeatureIds =
           e.features.map((f) => f.datasetAttributes['globalid']);
     }
     //@ts-ignore
     datasetLayer.style = applyStyle;
   }
   
   function handleMouseMove(/* MouseEvent */ e) {
     if (e.features) {
       lastInteractedFeatureIds =
           e.features.map((f) => f.datasetAttributes['globalid']);
     }
     //@ts-ignore
     datasetLayer.style = applyStyle;
   }
   index.ts

   Catatan: Baca panduan cara menggunakan TypeScript dan Google Maps.

   JavaScript

   // Note, 'globalid' is an attribute in this Dataset.
   function handleClick(/* MouseEvent */ e) {
     if (e.features) {
       lastClickedFeatureIds = e.features.map(
         (f) => f.datasetAttributes["globalid"],
       );
     }
   
     //@ts-ignore
     datasetLayer.style = applyStyle;
   }
   
   function handleMouseMove(/* MouseEvent */ e) {
     if (e.features) {
       lastInteractedFeatureIds = e.features.map(
         (f) => f.datasetAttributes["globalid"],
       );
     }
   
     //@ts-ignore
     datasetLayer.style = applyStyle;
   }
   index.js

3. Gunakan fungsi gaya fitur untuk menerapkan gaya. Fungsi gaya fitur yang ditampilkan di sini secara kondisional menerapkan gaya berdasarkan jenis interaksi. Tiga gaya ditentukan di sini: satu untuk membuat batas tebal di mousemove, satu untuk mengubah latar belakang di click, dan gaya default.

   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(/* FeatureStyleFunctionOptions */ params) {
     const datasetFeature = params.feature;
     // Note, 'globalid' is an attribute in this dataset.
     //@ts-ignore
     if (lastClickedFeatureIds.includes(datasetFeature.datasetAttributes['globalid'])) {
       return styleClicked;
     }
     //@ts-ignore
     if (lastInteractedFeatureIds.includes(datasetFeature.datasetAttributes['globalid'])) {
       return styleMouseMove;
     }
     return styleDefault;
   }
   index.ts

   Catatan: Baca panduan cara menggunakan TypeScript dan Google Maps.

   JavaScript

   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(/* FeatureStyleFunctionOptions */ params) {
     const datasetFeature = params.feature;
   
     // Note, 'globalid' is an attribute in this dataset.
     //@ts-ignore
     if (
       lastClickedFeatureIds.includes(datasetFeature.datasetAttributes["globalid"])
     ) {
       return styleClicked;
     }
   
     //@ts-ignore
     if (
       lastInteractedFeatureIds.includes(
         datasetFeature.datasetAttributes["globalid"],
       )
     ) {
       return styleMouseMove;
     }
     return styleDefault;
   }
   index.js

Kode contoh lengkap

TypeScript

let map: google.maps.Map;
let lastInteractedFeatureIds = [];
let lastClickedFeatureIds = [];
let datasetLayer;

// Note, 'globalid' is an attribute in this Dataset.
function handleClick(/* MouseEvent */ e) {
  if (e.features) {
    lastClickedFeatureIds =
        e.features.map((f) => f.datasetAttributes['globalid']);
  }
  //@ts-ignore
  datasetLayer.style = applyStyle;
}

function handleMouseMove(/* MouseEvent */ e) {
  if (e.features) {
    lastInteractedFeatureIds =
        e.features.map((f) => f.datasetAttributes['globalid']);
  }
  //@ts-ignore
  datasetLayer.style = applyStyle;
}

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary('maps') as google.maps.MapsLibrary;

  const position = {lat: 40.780101, lng: -73.967780};
  map = new Map(document.getElementById('map') as HTMLElement, {
    zoom: 13,
    center: position,
    mapId: 'b98e588c46685dd7',
    mapTypeControl: false,
  });

  // Dataset ID for NYC park data.
  const datasetId = '6fe13aa9-b900-45e7-b636-3236672c3f4f';

  //@ts-ignore
  datasetLayer = map.getDatasetFeatureLayer(datasetId);
  datasetLayer.style = applyStyle;

  datasetLayer.addListener('click', handleClick);
  datasetLayer.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 = [];
      datasetLayer.style = applyStyle;
    }
  });
  const attributionDiv = document.createElement('div');
  const attributionControl = createAttribution(map);

  attributionDiv.appendChild(attributionControl);
  map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);
}

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(/* FeatureStyleFunctionOptions */ params) {
  const datasetFeature = params.feature;
  // Note, 'globalid' is an attribute in this dataset.
  //@ts-ignore
  if (lastClickedFeatureIds.includes(datasetFeature.datasetAttributes['globalid'])) {
    return styleClicked;
  }
  //@ts-ignore
  if (lastInteractedFeatureIds.includes(datasetFeature.datasetAttributes['globalid'])) {
    return styleMouseMove;
  }
  return styleDefault;
}

function createAttribution(map) {
  const attributionLabel = document.createElement('div');

  // Define CSS styles.
  attributionLabel.style.backgroundColor = '#fff';
  attributionLabel.style.opacity = '0.7';
  attributionLabel.style.fontFamily = 'Roboto,Arial,sans-serif';
  attributionLabel.style.fontSize = '10px';
  attributionLabel.style.padding = '2px';
  attributionLabel.style.margin = '2px';
  attributionLabel.textContent = 'Data source: NYC Open Data';
  return attributionLabel;
}

initMap();
index.ts

Catatan: Baca panduan cara menggunakan TypeScript dan Google Maps.

JavaScript

let map;
let lastInteractedFeatureIds = [];
let lastClickedFeatureIds = [];
let datasetLayer;

// Note, 'globalid' is an attribute in this Dataset.
function handleClick(/* MouseEvent */ e) {
  if (e.features) {
    lastClickedFeatureIds = e.features.map(
      (f) => f.datasetAttributes["globalid"],
    );
  }

  //@ts-ignore
  datasetLayer.style = applyStyle;
}

function handleMouseMove(/* MouseEvent */ e) {
  if (e.features) {
    lastInteractedFeatureIds = e.features.map(
      (f) => f.datasetAttributes["globalid"],
    );
  }

  //@ts-ignore
  datasetLayer.style = applyStyle;
}

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");
  const position = { lat: 40.780101, lng: -73.96778 };

  map = new Map(document.getElementById("map"), {
    zoom: 13,
    center: position,
    mapId: "b98e588c46685dd7",
    mapTypeControl: false,
  });

  // Dataset ID for NYC park data.
  const datasetId = "6fe13aa9-b900-45e7-b636-3236672c3f4f";

  //@ts-ignore
  datasetLayer = map.getDatasetFeatureLayer(datasetId);
  datasetLayer.style = applyStyle;
  datasetLayer.addListener("click", handleClick);
  datasetLayer.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 = [];
      datasetLayer.style = applyStyle;
    }
  });

  const attributionDiv = document.createElement("div");
  const attributionControl = createAttribution(map);

  attributionDiv.appendChild(attributionControl);
  map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);
}

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(/* FeatureStyleFunctionOptions */ params) {
  const datasetFeature = params.feature;

  // Note, 'globalid' is an attribute in this dataset.
  //@ts-ignore
  if (
    lastClickedFeatureIds.includes(datasetFeature.datasetAttributes["globalid"])
  ) {
    return styleClicked;
  }

  //@ts-ignore
  if (
    lastInteractedFeatureIds.includes(
      datasetFeature.datasetAttributes["globalid"],
    )
  ) {
    return styleMouseMove;
  }
  return styleDefault;
}

function createAttribution(map) {
  const attributionLabel = document.createElement("div");

  // Define CSS styles.
  attributionLabel.style.backgroundColor = "#fff";
  attributionLabel.style.opacity = "0.7";
  attributionLabel.style.fontFamily = "Roboto,Arial,sans-serif";
  attributionLabel.style.fontSize = "10px";
  attributionLabel.style.padding = "2px";
  attributionLabel.style.margin = "2px";
  attributionLabel.textContent = "Data source: NYC Open Data";
  return attributionLabel;
}

initMap();
index.js