إشعار الأمان: نما إلى علمنا بمشكلة أمنية قد تؤثر في المواقع الإلكترونية التي تستخدم مكتبات معيّنة تابعة لجهات خارجية (بما في ذلك polyfill.io). وقد تؤدي هذه المشكلة في بعض الأحيان إلى إعادة توجيه الزائرين بعيدًا عن الموقع الإلكتروني المقصود بدون معرفة مالك الموقع أو إذنه. وفي السابق، كان يتضمّن العديد من نماذج JavaScript تعريف النص البرمجي polyfill.io. تمت إزالة هذا المحتوى من نماذجنا. إذا كنت قد استخدمت نماذج JavaScript التي تحتوي على هذا التعريف، ننصحك بإزالة التعريف.

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

عناصر التحكّم

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

نظرة عامة على عناصر التحكّم

تحتوي الخرائط المعروضة من خلال Maps JavaScript API على واجهة مستخدم العناصر للسماح للمستخدم بالتفاعل مع الخريطة. تُعرف هذه العناصر باسم عناصر التحكم ويمكنك تضمين صيغ مختلفة من عناصر التحكم هذه في التطبيق. وبدلاً من ذلك، يمكنك عدم اتخاذ أي إجراء والسماح تتعامل واجهة برمجة تطبيقات JavaScript للخرائط مع جميع أساليب التحكّم.

توضح الخريطة التالية المجموعة الافتراضية لعناصر التحكم التي يعرضها واجهة برمجة تطبيقات JavaScript للخرائط:

فيما يلي قائمة بمجموعة كاملة من عناصر التحكم التي يمكنك استخدامها في خرائطك:

يعرض عنصر التحكّم في التكبير أو التصغير علامة "+". و"-" أزرار لتغيير مستوى تكبير/تصغير الخريطة. يظهر عنصر التحكم هذا بشكل افتراضي في الزاوية اليمنى السفلية من الخريطة.
يتوفّر التحكّم في نوع الخريطة في قائمة منسدلة. أو نمط شريط أفقي للزر، مما يسمح للمستخدم باختيار نوع الخريطة (ROADMAP أو SATELLITE أو HYBRID أو TERRAIN). يظهر عنصر التحكّم هذا تلقائيًا في أعلى يمين الصفحة. زاوية الخريطة.
يحتوي عنصر التحكم في "التجوّل الافتراضي" على رمز "الدليل" التي يمكن سحبها على الخريطة لتفعيل التجوّل الافتراضي. عنصر التحكّم هذا بشكل افتراضي بالقرب من أسفل يسار الخريطة.
يوفر عنصر التحكم في التدوير مجموعة من خيارات الإمالة والتدوير للخرائط التي تحتوي على صور مائلة. هذا النمط بشكل افتراضي بالقرب من أسفل يسار الخريطة. عرض 45° الصور لمزيد من المعلومات.
يعرض عنصر التحكم في المقياس عنصر مقياس الخريطة. ويكون عنصر التحكّم هذا غير مفعَّل تلقائيًا.
يتيح التحكم في ملء الشاشة خيار فتح الخريطة في وضع ملء الشاشة. ويتم تمكين عنصر التحكم هذا بشكل افتراضي على سطح المكتب أجهزة محمولة. ملاحظة: نظام التشغيل iOS لا يتيح ميزة ملء الشاشة. وبالتالي فإن عنصر التحكم بملء الشاشة هو غير مرئية على أجهزة iOS.
يعرض عنصر التحكم في اختصارات لوحة المفاتيح قائمة اختصارات لوحة المفاتيح للتفاعل مع الخريطة.

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

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

واجهة المستخدم التلقائية

بشكل افتراضي، تختفي جميع عناصر التحكم إذا كانت الخريطة صغيرة جدًا (200 × 200 بكسل). يمكنك إلغاء هذا السلوك من خلال تعيين عنصر التحكم بشكل صريح ليكون مرئية. راجع إضافة عناصر التحكم إلى الخريطة.

يكون سلوك ومظهر عناصر التحكم متماثلين عبر الهاتف المحمول أجهزة سطح المكتب، باستثناء التحكم بملء الشاشة (راجع السلوك كما هو موضَّح في قائمة عناصر التحكُّم).

بالإضافة إلى ذلك، تكون ميزة التعامل مع لوحة المفاتيح مفعَّلة بشكل تلقائي على جميع الأجهزة.

إيقاف واجهة المستخدم التلقائية

قد تحتاج إلى إيقاف أزرار واجهة المستخدم التلقائية لواجهة برمجة التطبيقات بالكامل. لإجراء ذلك، ضبط خاصية disableDefaultUI للخريطة (داخل MapOptions) إلى true. هذا الموقع لإيقاف أي أزرار تحكم في واجهة المستخدم من واجهة برمجة تطبيقات JavaScript للخرائط. أُنشأها جون هنتر، الذي كان متخصصًا إلا أنه لا يؤثر على إيماءات الماوس أو اختصارات لوحة المفاتيح على القاعدة التي يتم التحكم فيها من خلال gestureHandling سمتان (keyboardShortcuts) على التوالي

يؤدي الرمز التالي إلى إيقاف أزرار واجهة المستخدم:

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
      disableDefaultUI: true,
    }
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -33, lng: 151 },
    disableDefaultUI: true,
  });
}

window.initMap = initMap;index.js

الاطّلاع على مثال

تجربة "عيّنة"

JSFiddle.net Google Cloud Shell

إضافة عناصر التحكم إلى الخريطة

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

تظهر بعض عناصر التحكم على الخريطة بشكل افتراضي بينما لن تظهر عناصر أخرى ما لم تطلبها على وجه التحديد. يمكن إضافة عناصر تحكّم أو إزالتها من تم تحديدها في عنصر MapOptions التالي التي تم ضبطها على true لجعلها مرئية أو تم ضبطها على false لإخفائها:

{
  zoomControl: boolean,
  mapTypeControl: boolean,
  scaleControl: boolean,
  streetViewControl: boolean,
  rotateControl: boolean,
  fullscreenControl: boolean
}

بشكل افتراضي، تختفي جميع عناصر التحكم إذا كان حجم الخريطة أصغر من 200×200 بكسل. يمكنك إلغاء هذا السلوك من خلال تعيين عنصر التحكم بشكل صريح ليكون مرئية. على سبيل المثال، يوضح الجدول التالي ما إذا كان عنصر التحكم في التكبير/التصغير مرئية أم لا، بناءً على حجم الخريطة وإعدادات الحقل "zoomControl":

حجم الخريطة	`zoomControl`	هل الجهاز مرئي؟
أي لون	`false`	لا
أي لون	`true`	نعم
>= 200 × 200 بكسل	`undefined`	نعم
< 200 × 200 بكسل	`undefined`	لا

يضبط المثال التالي الخريطة على إخفاء التكبير/التصغير التحكم في المقياس وعرضه. لاحظ أننا لا نسمح إيقاف واجهة المستخدم التلقائية، لكي تتم إضافة هذه التعديلات إلى واجهة المستخدم التلقائية السلوك.

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
      zoomControl: false,
      scaleControl: true,
    }
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -33, lng: 151 },
    zoomControl: false,
    scaleControl: true,
  });
}

window.initMap = initMap;index.js

الاطّلاع على مثال

تجربة "عيّنة"

JSFiddle.net Google Cloud Shell

خيارات التحكّم

هناك العديد من عناصر التحكم القابلة للتهيئة، مما يسمح لك بتغيير سلوكها أو تغيير مظهرها. التحكم في نوع الخريطة، مثلاً كشريط أفقي أو قائمة منسدلة.

يتم تعديل عناصر التحكم هذه عن طريق تغيير خيارات التحكم المناسبة الحقول داخل الكائن MapOptions عند إنشاء الخريطة.

على سبيل المثال، تتم الإشارة إلى خيارات تغيير عنصر التحكم "نوع الخريطة" في الحقل "mapTypeControlOptions". قد يظهر عنصر التحكم في نوع الخريطة في أحد خيارات style التالية:

يعرض google.maps.MapTypeControlStyle.HORIZONTAL_BAR مصفوفة من عناصر التحكم كأزرار في شريط أفقي كما يظهر على Google و"خرائط Google".
يعرض google.maps.MapTypeControlStyle.DROPDOWN_MENU عنصر تحكم بزر واحد يسمح لك بتحديد نوع الخريطة من خلال قائمة منسدلة القائمة.
يعرض google.maps.MapTypeControlStyle.DEFAULT سلوك تلقائي، والذي يعتمد على حجم الشاشة وقد يتغير في المستقبل من واجهة برمجة التطبيقات.

يُرجى العِلم أنّه في حال تعديل أيّ من خيارات التحكّم، عليك تفعيل الإعداد. عنصر التحكّم أيضًا من خلال ضبط قيمة MapOptions المناسبة إلى true. على سبيل المثال، لضبط عنصر تحكم في نوع الخريطة لعرض نمط DROPDOWN_MENU، استخدِم الرمز التالي ضمن كائن MapOptions:

  ...
  mapTypeControl: true,
  mapTypeControlOptions: {
    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
  }
  ...

يوضح المثال التالي كيفية تغيير الموضع الافتراضي ونمط عناصر التحكم.

TypeScript

// You can set control options to change the default position or style of many
// of the map controls.

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: { lat: -33, lng: 151 },
      mapTypeControl: true,
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
        mapTypeIds: ["roadmap", "terrain"],
      },
    }
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// You can set control options to change the default position or style of many
// of the map controls.
function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: { lat: -33, lng: 151 },
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
      mapTypeIds: ["roadmap", "terrain"],
    },
  });
}

window.initMap = initMap;index.js

الاطّلاع على مثال

تجربة "عيّنة"

JSFiddle.net Google Cloud Shell

عادة ما يتم ضبط عناصر التحكم عند إنشاء الخريطة. ومع ذلك، يمكنك تغيير طريقة عرض عناصر التحكم ديناميكيًا من خلال عن طريق استدعاء طريقة setOptions() في Map، وتمريره خيارات تحكم جديدة.

تعديل عناصر التحكّم

يمكنك تحديد العرض التقديمي لعنصر التحكّم عند إنشاء الخريطة. خلال الحقول داخل كائن MapOptions على الخريطة. هذه تتم الإشارة إلى الحقول أدناه:

يعمل zoomControl على تفعيل/إيقاف عنصر التحكّم في التكبير/التصغير. بشكل افتراضي، يكون عنصر التحكم هذا مرئيًا ويظهر بالقرب من أسفل يسار الخريطة. تشير رسالة الأشكال البيانية يحدد الحقل zoomControlOptions أيضًا ZoomControlOptions المستخدمة في عنصر التحكّم هذا.
يفعِّل/يوقف mapTypeControl عنصر التحكّم في نوع الخريطة. تتيح للمستخدم التبديل بين أنواع الخرائط (مثل الخريطة والقمر الصناعي). يظهر عنصر التحكّم هذا تلقائيًا في أعلى يمين الشاشة. زاوية الخريطة. الحقل mapTypeControlOptions بالإضافة إلى ذلك، تحدد السمة MapTypeControlOptions إلى استخدامها لعنصر التحكم هذا.
يفعِّل/يوقف streetViewControl عنصر تحكم "الدليل" تُتيح للمستخدم تفعيل بانوراما التجوّل الافتراضي. يكون عنصر التحكّم هذا مرئيًا بشكل تلقائي ويظهر بالقرب من أسفل يسار الشاشة. على الخريطة. الحقل streetViewControlOptions بالإضافة إلى ذلك، تحدد السمة StreetViewControlOptions إلى استخدامها لعنصر التحكم هذا.
تفعيل/إيقاف rotateControl مظهر تدوير عنصر التحكم للتحكم في اتجاه الصور بزاوية 45 درجة. من يتم تحديد تواجد عنصر التحكم من خلال التواجد أو الغياب من صور بزاوية 45 درجة لنوع الخريطة المحدد في مستوى التكبير/التصغير الحالي الموقع. يمكنك تغيير سلوك عنصر التحكم من خلال تعيين إعدادات rotateControlOptions لتحديد يمكنك استخدام RotateControlOptions. لا يمكنك إجراء في حالة عدم توفر صور بزاوية 45 درجة حاليًا.
يفعِّل/يوقف scaleControl عنصر التحكم في المقياس الذي مقياسًا بسيطًا للخريطة. ويكون عنصر التحكّم هذا غير مرئي بشكل تلقائي. فعندما في وضع التمكين، سيظهر دائمًا في أسفل الجانب الأيسر من الخريطة. تشير رسالة الأشكال البيانية تحدّد السمة scaleControlOptions أيضًا ScaleControlOptions المستخدمة في عنصر التحكّم هذا.
يفعِّل/يوقف fullscreenControl عنصر التحكّم الذي يفتح. الخريطة في وضع ملء الشاشة. ويتم تفعيل عنصر التحكّم هذا تلقائيًا. على أجهزة الكمبيوتر المكتبي وأجهزة Android عند تفعيل عنصر التحكّم، يظهر أعلى يسار الخريطة. تشير رسالة الأشكال البيانية تحدّد السمة fullscreenControlOptions أيضًا FullscreenControlOptions المستخدمة في عنصر التحكّم هذا.

تجدر الإشارة إلى أنّه يمكنك تحديد خيارات لعناصر التحكّم التي تعطّلها في البداية.

التحكم في تحديد الموضع

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

ملاحظة: لا يمكن تقديم أي ضمانات بشأن ذلك. لا يمكن أن تتداخل عناصر التحكم مع التخطيطات المعقدة، على الرغم من أن واجهة برمجة التطبيقات ستتغير ومحاولة ترتيبها بشكل ذكي.

تتوفّر مواضع التحكّم التالية:

يشير TOP_CENTER إلى أنّه يجب وضع عنصر التحكّم. طول أعلى مركز للخريطة.
يشير TOP_LEFT إلى أنّه يجب وضع عنصر التحكّم بطول الشاشة. الجزء العلوي الأيسر من الخريطة، مع أي عناصر فرعية لعناصر التحكم "تدفق" باتجاه أعلى المركز.
يشير TOP_RIGHT إلى أنّه يجب وضع عنصر التحكّم بطول الشاشة. أعلى يمين الخريطة، مع أي عناصر فرعية لعناصر التحكم "تدفق" باتجاه أعلى المركز.
يشير LEFT_TOP إلى أنّه يجب وضع عنصر التحكّم بطول الشاشة. أعلى يسار الخريطة، ولكن أسفل أي من عناصر TOP_LEFT.
يشير RIGHT_TOP إلى أنّه يجب وضع عنصر التحكّم بطول الشاشة. في أعلى يمين الخريطة، ولكن أسفل أيّ TOP_RIGHT عناصر.
يشير LEFT_CENTER إلى أنّه يجب وضع عنصر التحكّم. على طول الجانب الأيسر من الخريطة، في منتصف الخريطة بين TOP_LEFT وBOTTOM_LEFT موضعًا.
يشير RIGHT_CENTER إلى أنّه يجب وضع عنصر التحكّم. على طول الجانب الأيمن من الخريطة، في وسط الموضعان TOP_RIGHT وBOTTOM_RIGHT.
يشير LEFT_BOTTOM إلى أنّه يجب وضع عنصر التحكّم. على طول الجزء السفلي الأيسر من الخريطة، ولكن فوق أي BOTTOM_LEFT عناصر.
يشير RIGHT_BOTTOM إلى أنّه يجب وضع عنصر التحكّم. على طول الجانب السفلي الأيمن من الخريطة، ولكن فوق أي BOTTOM_RIGHT عناصر.
يشير BOTTOM_CENTER إلى أنّه يجب وضع عنصر التحكّم. طول مركز الخريطة.
يشير BOTTOM_LEFT إلى أنّه يجب وضع عنصر التحكّم. أسفل يسار الخريطة، مع أي عناصر فرعية من عناصر التحكم، "متدفق" باتجاه أسفل المركز.
يشير BOTTOM_RIGHT إلى أنّه يجب وضع عنصر التحكّم. أسفل يمين الخريطة، مع أي عناصر فرعية من عناصر التحكم "متدفق" باتجاه أسفل المركز.

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

يوضح المثال التالي خريطة بسيطة مع تمكين جميع عناصر التحكم، في المناصب المختلفة.

TypeScript

function initMap(): void {
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 12,
      center: { lat: -28.643387, lng: 153.612224 },
      mapTypeControl: true,
      mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.TOP_CENTER,
      },
      zoomControl: true,
      zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_CENTER,
      },
      scaleControl: true,
      streetViewControl: true,
      streetViewControlOptions: {
        position: google.maps.ControlPosition.LEFT_TOP,
      },
      fullscreenControl: true,
    }
  );
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: { lat: -28.643387, lng: 153.612224 },
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
      position: google.maps.ControlPosition.TOP_CENTER,
    },
    zoomControl: true,
    zoomControlOptions: {
      position: google.maps.ControlPosition.LEFT_CENTER,
    },
    scaleControl: true,
    streetViewControl: true,
    streetViewControlOptions: {
      position: google.maps.ControlPosition.LEFT_TOP,
    },
    fullscreenControl: true,
  });
}

window.initMap = initMap;index.js

الاطّلاع على مثال

تجربة "عيّنة"

JSFiddle.net Google Cloud Shell

عناصر التحكّم المخصّصة

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

لإنشاء عنصر تحكّم مخصّص، يجب استخدام بعض القواعد. ومع ذلك، يمكن أن تكون الإرشادات التالية بمثابة أفضل الممارسات:

حدد CSS المناسب لعناصر التحكم المراد عرضها.
التعامل مع التفاعل مع المستخدم أو الخريطة من خلال معالِجات الأحداث إما ربط تغييرات الخصائص أو أحداث المستخدم (على سبيل المثال، حدثان ('click')).
أنشئ عنصر <div> للاحتفاظ بعنصر التحكّم وإضافة عنصر هذا العنصر إلى السمة controls في Map.

وستتم مناقشة كل من هذه النقاط في ما يلي.

عناصر التحكّم المخصّصة في الرسم

لك مطلق الحرية في كيفية رسم التحكم. بوجه عام، ننصحك وضع جميع العروض التقديمية للتحكم في مجموعة <div> حتى يمكنك استخدام عنصر التحكّم وحدة واحدة. سنستخدم نمط التصميم هذا في العينات الموضحة أدناه.

يتطلب تصميم عناصر تحكم جذابة بعض الإلمام بـ CSS وDOM البنية. يوضح التعليمة البرمجية التالية دالة لإنشاء عنصر زر يتنقل حول الخريطة ليتم تركيزها على شيكاغو.

function createCenterControl(map) {
  const controlButton = document.createElement("button");

  // Set CSS for the control.
  controlButton.style.backgroundColor = "#fff";
  controlButton.style.border = "2px solid #fff";
  controlButton.style.borderRadius = "3px";
  controlButton.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)";
  controlButton.style.color = "rgb(25,25,25)";
  controlButton.style.cursor = "pointer";
  controlButton.style.fontFamily = "Roboto,Arial,sans-serif";
  controlButton.style.fontSize = "16px";
  controlButton.style.lineHeight = "38px";
  controlButton.style.margin = "8px 0 22px";
  controlButton.style.padding = "0 5px";
  controlButton.style.textAlign = "center";

  controlButton.textContent = "Center Map";
  controlButton.title = "Click to recenter the map";
  controlButton.type = "button";

  // Setup the click event listeners: simply set the map to Chicago.
  controlButton.addEventListener("click", () => {
    map.setCenter(chicago);
  });

  return controlButton;
}

معالجة الأحداث من عناصر التحكّم المخصّصة

لكي يكون عنصر التحكم مفيدًا، يجب أن يفعل شيئًا بالفعل. مزايا عنصر التحكم تفعله الأمر متروك لك. قد يستجيب عنصر التحكّم للبيانات التي أدخلها المستخدم، أو قد يستجيب. إلى التغييرات في حالة Map.

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

// Setup the click event listener: set the map to center on Chicago
var chicago = {lat: 41.850, lng: -87.650};

controlButton.addEventListener('click', () => {
  map.setCenter(chicago);
});

إتاحة إمكانية الوصول إلى عناصر التحكّم المخصّصة

للتأكّد من أنّ عناصر التحكّم تتلقّى أحداث لوحة المفاتيح وتظهر بشكل صحيح لبرامج قراءة الشاشة:

استخدام عناصر HTML الأصلية دائمًا للأزرار وعناصر النماذج والتسميات. استخدام DIV فقط عنصر كحاوية للاحتفاظ بعناصر التحكم الأصلية؛ عدم إعادة استخدام DIV كواجهة مستخدم تفاعلية مطلقًا العنصر.
استخدام العنصر label أو السمة title أو aria-label عندما يكون ذلك مناسبًا، لتقديم معلومات حول أحد عناصر واجهة المستخدم.

وضع عناصر التحكم المخصصة في السوق

يتم وضع عناصر التحكم المخصصة على الخريطة من خلال وضعها في المكان المناسب المواضع ضمن controls للكائن Map الموقع. يحتوي هذا الموقع على صفيف من google.maps.ControlPosition ثانية. يمكنك إضافة عنصر تحكّم مخصّص إلى الخريطة عن طريق إضافة Node (عادةً ما تكون <div>) إلى ControlPosition المناسبة. (للحصول على معلومات حول المواضع، راجع التحكم في تحديد الموضع above.)

يخزّن كل ControlPosition نسبة MVCArray من عناصر التحكم المعروضة في هذا الموضع. ونتيجة لذلك، عند إضافة عناصر تحكم أو من الموضع، ستعمل واجهة برمجة التطبيقات على تحديث عناصر التحكم وفقًا لذلك.

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

تُنشئ التعليمة البرمجية التالية عنصر تحكم مخصص جديد (أداة الإنشاء الخاصة به ليست ) وتضيفه إلى الخريطة في الموضع TOP_RIGHT.

var map = new google.maps.Map(document.getElementById('map'), mapOptions);

// Create a DIV to attach the control UI to the Map.
const centerControlDiv = document.createElement("div");

// Create the control. This code calls a function that
// creates a new instance of a button control.
const centerControl = createCenterControl(map);

// Append the control to the DIV.
centerControlDiv.appendChild(centerControl);

// Add the control to the map at a designated control position
// by pushing it on the position's array. This code will
// implicitly add the control to the DOM, through the Map
// object. You should not attach the control manually.
map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);

مثال على عنصر التحكّم المخصّص

يعد عنصر التحكم التالي بسيطًا (على الرغم من أنه ليس مفيدًا بشكل خاص) تجمع بين الأنماط الموضحة أعلاه. يستجيب عنصر التحكّم هذا لنموذج DOM 'click' حدث عن طريق توسيط الخريطة على قيمة تلقائية معيّنة الموقع:

TypeScript

let map: google.maps.Map;

const chicago = { lat: 41.85, lng: -87.65 };

/**
 * Creates a control that recenters the map on Chicago.
 */
 function createCenterControl(map) {
  const controlButton = document.createElement('button');

  // Set CSS for the control.
  controlButton.style.backgroundColor = '#fff';
  controlButton.style.border = '2px solid #fff';
  controlButton.style.borderRadius = '3px';
  controlButton.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
  controlButton.style.color = 'rgb(25,25,25)';
  controlButton.style.cursor = 'pointer';
  controlButton.style.fontFamily = 'Roboto,Arial,sans-serif';
  controlButton.style.fontSize = '16px';
  controlButton.style.lineHeight = '38px';
  controlButton.style.margin = '8px 0 22px';
  controlButton.style.padding = '0 5px';
  controlButton.style.textAlign = 'center';

  controlButton.textContent = 'Center Map';
  controlButton.title = 'Click to recenter the map';
  controlButton.type = 'button';

  // Setup the click event listeners: simply set the map to Chicago.
  controlButton.addEventListener('click', () => {
    map.setCenter(chicago);
  });

  return controlButton;
}

function initMap() {
  map = new google.maps.Map(document.getElementById('map') as HTMLElement, {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control.
  const centerControlDiv = document.createElement('div');
  // Create the control.
  const centerControl = createCenterControl(map);
  // Append the control to the DIV.
  centerControlDiv.appendChild(centerControl);

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

let map;
const chicago = { lat: 41.85, lng: -87.65 };

/**
 * Creates a control that recenters the map on Chicago.
 */
function createCenterControl(map) {
  const controlButton = document.createElement("button");

  // Set CSS for the control.
  controlButton.style.backgroundColor = "#fff";
  controlButton.style.border = "2px solid #fff";
  controlButton.style.borderRadius = "3px";
  controlButton.style.boxShadow = "0 2px 6px rgba(0,0,0,.3)";
  controlButton.style.color = "rgb(25,25,25)";
  controlButton.style.cursor = "pointer";
  controlButton.style.fontFamily = "Roboto,Arial,sans-serif";
  controlButton.style.fontSize = "16px";
  controlButton.style.lineHeight = "38px";
  controlButton.style.margin = "8px 0 22px";
  controlButton.style.padding = "0 5px";
  controlButton.style.textAlign = "center";
  controlButton.textContent = "Center Map";
  controlButton.title = "Click to recenter the map";
  controlButton.type = "button";
  // Setup the click event listeners: simply set the map to Chicago.
  controlButton.addEventListener("click", () => {
    map.setCenter(chicago);
  });
  return controlButton;
}

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control.
  const centerControlDiv = document.createElement("div");
  // Create the control.
  const centerControl = createCenterControl(map);

  // Append the control to the DIV.
  centerControlDiv.appendChild(centerControl);
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

window.initMap = initMap;index.js

الاطّلاع على مثال

تجربة "عيّنة"

JSFiddle.net Google Cloud Shell

جارٍ إضافة الحالة إلى عناصر التحكّم

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

TypeScript

let map: google.maps.Map;

const chicago: google.maps.LatLngLiteral = { lat: 41.85, lng: -87.65 };

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 */
class CenterControl {
  private map_: google.maps.Map;
  private center_: google.maps.LatLng;
  constructor(
    controlDiv: HTMLElement,
    map: google.maps.Map,
    center: google.maps.LatLngLiteral
  ) {
    this.map_ = map;
    // Set the center property upon construction
    this.center_ = new google.maps.LatLng(center);
    controlDiv.style.clear = "both";

    // Set CSS for the control border
    const goCenterUI = document.createElement("button");

    goCenterUI.id = "goCenterUI";
    goCenterUI.title = "Click to recenter the map";
    controlDiv.appendChild(goCenterUI);

    // Set CSS for the control interior
    const goCenterText = document.createElement("div");

    goCenterText.id = "goCenterText";
    goCenterText.innerHTML = "Center Map";
    goCenterUI.appendChild(goCenterText);

    // Set CSS for the setCenter control border
    const setCenterUI = document.createElement("button");

    setCenterUI.id = "setCenterUI";
    setCenterUI.title = "Click to change the center of the map";
    controlDiv.appendChild(setCenterUI);

    // Set CSS for the control interior
    const setCenterText = document.createElement("div");

    setCenterText.id = "setCenterText";
    setCenterText.innerHTML = "Set Center";
    setCenterUI.appendChild(setCenterText);

    // Set up the click event listener for 'Center Map': Set the center of
    // the map
    // to the current center of the control.
    goCenterUI.addEventListener("click", () => {
      const currentCenter = this.center_;

      this.map_.setCenter(currentCenter);
    });

    // Set up the click event listener for 'Set Center': Set the center of
    // the control to the current center of the map.
    setCenterUI.addEventListener("click", () => {
      const newCenter = this.map_.getCenter()!;

      if (newCenter) {
        this.center_ = newCenter;
      }
    });
  }
}

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor passing in this DIV.
  const centerControlDiv = document.createElement("div");
  const control = new CenterControl(centerControlDiv, map, chicago);

  // @ts-ignore
  centerControlDiv.index = 1;
  centerControlDiv.style.paddingTop = "10px";
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

let map;
const chicago = { lat: 41.85, lng: -87.65 };

/**
 * The CenterControl adds a control to the map that recenters the map on
 * Chicago.
 */
class CenterControl {
  map_;
  center_;
  constructor(controlDiv, map, center) {
    this.map_ = map;
    // Set the center property upon construction
    this.center_ = new google.maps.LatLng(center);
    controlDiv.style.clear = "both";

    // Set CSS for the control border
    const goCenterUI = document.createElement("button");

    goCenterUI.id = "goCenterUI";
    goCenterUI.title = "Click to recenter the map";
    controlDiv.appendChild(goCenterUI);

    // Set CSS for the control interior
    const goCenterText = document.createElement("div");

    goCenterText.id = "goCenterText";
    goCenterText.innerHTML = "Center Map";
    goCenterUI.appendChild(goCenterText);

    // Set CSS for the setCenter control border
    const setCenterUI = document.createElement("button");

    setCenterUI.id = "setCenterUI";
    setCenterUI.title = "Click to change the center of the map";
    controlDiv.appendChild(setCenterUI);

    // Set CSS for the control interior
    const setCenterText = document.createElement("div");

    setCenterText.id = "setCenterText";
    setCenterText.innerHTML = "Set Center";
    setCenterUI.appendChild(setCenterText);
    // Set up the click event listener for 'Center Map': Set the center of
    // the map
    // to the current center of the control.
    goCenterUI.addEventListener("click", () => {
      const currentCenter = this.center_;

      this.map_.setCenter(currentCenter);
    });
    // Set up the click event listener for 'Set Center': Set the center of
    // the control to the current center of the map.
    setCenterUI.addEventListener("click", () => {
      const newCenter = this.map_.getCenter();

      if (newCenter) {
        this.center_ = newCenter;
      }
    });
  }
}

function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    zoom: 12,
    center: chicago,
  });

  // Create the DIV to hold the control and call the CenterControl()
  // constructor passing in this DIV.
  const centerControlDiv = document.createElement("div");
  const control = new CenterControl(centerControlDiv, map, chicago);

  // @ts-ignore
  centerControlDiv.index = 1;
  centerControlDiv.style.paddingTop = "10px";
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}

window.initMap = initMap;index.js

الاطّلاع على مثال

تجربة "عيّنة"

JSFiddle.net Google Cloud Shell