نقدّم لك مجموعة أدوات واجهة المستخدم الخاصة بـ Places: هي مكتبة مكوّنات جاهزة للاستخدام ومنخفضة التكلفة تتيح لك إضافة واجهة مستخدم Places المألوفة من "خرائط Google" إلى أي خريطة تختارها. ننصحك بتجربتها و مشاركة ملاحظاتك للمساعدة في رسم مستقبل "منصة Google للتسويق".

تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

التعامل مع أحداث الماوس

اختيار النظام الأساسي: Android iOS JavaScript

اجعل ميزات البيانات تستجيب للأحداث mousemove وclick، واستخدِمها لتغيير مظهر إحدى الميزات استنادًا إلى تفاعل المستخدم.

تفعيل أحداث طبقة مجموعة البيانات

اتّبِع الخطوات التالية لتفعيل الأحداث في طبقة مجموعة البيانات:

سجِّل طبقة مجموعة بيانات لتلقّي إشعارات الأحداث من خلال استدعاء الدالة addListener() في طبقة مجموعة البيانات لكل حدث تريد تسجيله. في هذا المثال، تحصل الخريطة أيضًا على مستمع.

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

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

أضِف رمز معالج الأحداث لتصميم العنصر المحدّد استنادًا إلى نوع التفاعل.

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

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

استخدِم دالة نمط عنصر لتطبيق الأنماط. تطبّق دالة نمط العنصر هنا النمط بشكل مشروط استنادًا إلى نوع التفاعل. تم تحديد ثلاثة أنماط هنا: نمط لجعل الحد غليظًا عند mousemove، ونمط لتغيير الخلفية عند click، ونمط تلقائي.

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

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

مثال على الرمز البرمجي الكامل

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

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

التعامل مع أحداث الماوس تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

تفعيل أحداث طبقة مجموعة البيانات

TypeScript

JavaScript

TypeScript

JavaScript

TypeScript

JavaScript

مثال على الرمز البرمجي الكامل

TypeScript

JavaScript

التعامل مع أحداث الماوس