Datenfeatures anklickbar machen

Wenn ein Datenelement auf Klickereignisse reagieren soll, müssen Sie einen Klick-Listener hinzufügen. Im folgenden Beispiel wird gezeigt, wie sich die Darstellung eines Elements bei einem Klickereignis ändert.

Event-Listener hinzufügen

Um einen Listener hinzuzufügen, rufen Sie addListener aus der Dataset-Ebene auf, wie im folgenden Beispiel gezeigt:

TypeScript

datasetLayer.addListener('click', handleClick);
index.ts

JavaScript

datasetLayer.addListener("click", handleClick);

index.js

Event-Handler für Klicks hinzufügen

Im Event-Handler für Klicks für ein Dataset-Element können Sie auf die Attribute des Datasets zugreifen. Bei der folgenden Beispielfunktion wird die globalid des angeklickten Elements der Variablen lastClickedFeatureIds zugewiesen.

TypeScript

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

JavaScript

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

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

index.js

Stilfunktion erstellen

Über die Stilfunktion können Sie die Stilattribute für das angeklickte Element ändern. Mit der folgenden Beispiel-Stilfunktion wird die Strichfarbe des angeklickten Elements zu Blau geändert. Alle anderen Elemente werden grün dargestellt.

TypeScript

function setStyle(/* FeatureStyleFunctionOptions */ params) {
    const datasetFeature = params.feature;

    // Note, 'globalid' is an attribute in this dataset.
    //@ts-ignore
    if (lastClickedFeatureIds.includes(datasetFeature.datasetAttributes['globalid'])) {
      return /* FeatureStyleOptions */ {
        strokeColor: 'blue',
        strokeWeight: 2,
        strokeOpacity: 1,
        fillColor: 'blue',
        fillOpacity: 0.5,
      };
    }
    return /* FeatureStyleOptions */ {
      strokeColor: 'green',
      strokeWeight: 2,
      strokeOpacity: 1,
      fillColor: 'green',
      fillOpacity: 0.3,
    };
}
index.ts

JavaScript

function setStyle(/* FeatureStyleFunctionOptions */ params) {
  const datasetFeature = params.feature;

  // Note, 'globalid' is an attribute in this dataset.
  //@ts-ignore
  if (
    lastClickedFeatureIds.includes(datasetFeature.datasetAttributes["globalid"])
  ) {
    return /* FeatureStyleOptions */ {
      strokeColor: "blue",
      strokeWeight: 2,
      strokeOpacity: 1,
      fillColor: "blue",
      fillOpacity: 0.5,
    };
  }
  return /* FeatureStyleOptions */ {
    strokeColor: "green",
    strokeWeight: 2,
    strokeOpacity: 1,
    fillColor: "green",
    fillOpacity: 0.3,
  };
}

index.js

Vollständiges Codebeispiel

TypeScript

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

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

function setStyle(/* FeatureStyleFunctionOptions */ params) {
    const datasetFeature = params.feature;

    // Note, 'globalid' is an attribute in this dataset.
    //@ts-ignore
    if (lastClickedFeatureIds.includes(datasetFeature.datasetAttributes['globalid'])) {
      return /* FeatureStyleOptions */ {
        strokeColor: 'blue',
        strokeWeight: 2,
        strokeOpacity: 1,
        fillColor: 'blue',
        fillOpacity: 0.5,
      };
    }
    return /* FeatureStyleOptions */ {
      strokeColor: 'green',
      strokeWeight: 2,
      strokeOpacity: 1,
      fillColor: 'green',
      fillOpacity: 0.3,
    };
}

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

    const position = new LatLng(40.796675, -73.946275);
    const 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 = setStyle;
    datasetLayer.addListener('click', handleClick);

    const attributionDiv = document.createElement('div');
    const attributionControl = createAttribution(map);
    attributionDiv.appendChild(attributionControl);
    map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(attributionDiv);
}

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

JavaScript

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

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

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

function setStyle(/* FeatureStyleFunctionOptions */ params) {
  const datasetFeature = params.feature;

  // Note, 'globalid' is an attribute in this dataset.
  //@ts-ignore
  if (
    lastClickedFeatureIds.includes(datasetFeature.datasetAttributes["globalid"])
  ) {
    return /* FeatureStyleOptions */ {
      strokeColor: "blue",
      strokeWeight: 2,
      strokeOpacity: 1,
      fillColor: "blue",
      fillOpacity: 0.5,
    };
  }
  return /* FeatureStyleOptions */ {
    strokeColor: "green",
    strokeWeight: 2,
    strokeOpacity: 1,
    fillColor: "green",
    fillOpacity: 0.3,
  };
}

async function initMap() {
  // Request needed libraries.
  const { Map } = await google.maps.importLibrary("maps");
  const { LatLng } = await google.maps.importLibrary("core");
  const position = new LatLng(40.796675, -73.946275);
  const 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 = setStyle;
  datasetLayer.addListener("click", handleClick);

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

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

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