Xử lý sự kiện chuột

Chọn nền tảng: Android iOS JavaScript

Làm cho các tính năng dữ liệu phản hồi các sự kiện mousemove và click, đồng thời sử dụng các sự kiện đó để thay đổi giao diện của một tính năng dựa trên tương tác của người dùng.

Bật sự kiện lớp tập dữ liệu

Hãy làm theo các bước sau để bật sự kiện trên lớp tập dữ liệu:

1. Đăng ký một lớp tập dữ liệu cho thông báo sự kiện bằng cách gọi hàm addListener() trên lớp tập dữ liệu cho mỗi sự kiện bạn muốn đăng ký. Trong ví dụ này, bản đồ cũng nhận được một trình nghe.

   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

   Lưu ý: Hãy đọc hướng dẫn về cách sử dụng TypeScript và 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. Thêm mã trình xử lý sự kiện để tạo kiểu cho tính năng đã chọn dựa trên loại tương tác.

   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

   Lưu ý: Hãy đọc hướng dẫn về cách sử dụng TypeScript và 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. Dùng hàm kiểu tính năng để áp dụng kiểu. Hàm kiểu tính năng được hiển thị ở đây áp dụng kiểu có điều kiện dựa trên loại tương tác. Có 3 kiểu được xác định ở đây: một kiểu để in đậm đường viền trên mousemove, một kiểu để thay đổi nền trên click và một kiểu mặc định.

   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

   Lưu ý: Hãy đọc hướng dẫn về cách sử dụng TypeScript và 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

Mã ví dụ hoàn chỉnh

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

Lưu ý: Hãy đọc hướng dẫn về cách sử dụng TypeScript và 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