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

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

Tạo 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 này để thay đổi giao diện của một tính năng dựa trên hoạt động 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 mà bạn muốn đăng ký. Trong ví dụ này, bản đồ cũng nhận được một trình nghe.

   TypeScriptJavaScript
   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 ý: Đọc hướng dẫn về cách sử dụng TypeScript và Google Maps.
   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.

   TypeScriptJavaScript
   // 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 ý: Đọc hướng dẫn về cách sử dụng TypeScript và Google Maps.
   // 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. Sử 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. Ba kiểu được xác định ở đây: một kiểu để làm đậ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.

   TypeScriptJavaScript
   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 ý: Đọc hướng dẫn về cách sử dụng TypeScript và Google Maps.
   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

TypeScriptJavaScript

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 ý: Đọc hướng dẫn về cách sử dụng TypeScript và Google Maps.

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