نظرة عامة على عناصر التحكّم
تحتوي الخرائط المعروضة من خلال 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;
JavaScript
function initMap() { const map = new google.maps.Map(document.getElementById("map"), { zoom: 4, center: { lat: -33, lng: 151 }, disableDefaultUI: true, }); } window.initMap = initMap;
تجربة "عيّنة"
إضافة عناصر التحكم إلى الخريطة
قد تحتاج إلى تخصيص واجهتك من خلال إزالة أو إضافة أو تعديل واجهة المستخدم السلوك أو عناصر التحكم، والتأكد من أنّ التحديثات المستقبلية لا تغيّر السلوك. إذا أردت إضافة سلوك حالي أو تعديله فقط، عليك يجب التأكد من إضافة عنصر التحكم بشكل صريح إلى التطبيق.
تظهر بعض عناصر التحكم على الخريطة بشكل افتراضي بينما لن تظهر عناصر أخرى
ما لم تطلبها على وجه التحديد. يمكن إضافة عناصر تحكّم أو إزالتها من
تم تحديدها في عنصر 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;
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;
تجربة "عيّنة"
خيارات التحكّم
هناك العديد من عناصر التحكم القابلة للتهيئة، مما يسمح لك بتغيير سلوكها أو تغيير مظهرها. التحكم في نوع الخريطة، مثلاً كشريط أفقي أو قائمة منسدلة.
يتم تعديل عناصر التحكم هذه عن طريق تغيير خيارات التحكم المناسبة
الحقول داخل الكائن 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;
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;
تجربة "عيّنة"
عادة ما يتم ضبط عناصر التحكم عند إنشاء الخريطة. ومع ذلك،
يمكنك تغيير طريقة عرض عناصر التحكم ديناميكيًا من خلال
عن طريق استدعاء طريقة 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;
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;
تجربة "عيّنة"
عناصر التحكّم المخصّصة
بالإضافة إلى تعديل نمط عناصر التحكم الحالية في واجهة برمجة التطبيقات وموضعها، يمكنك
يمكنك إنشاء عناصر تحكم خاصة بك للتعامل مع التفاعل مع المستخدم. عناصر التحكّم
هي أدوات ثابتة تطفو فوق الخريطة في المواضع المطلقة،
بدلاً من التراكبات، التي تتحرك مع الخريطة الأساسية. المزيد
عنصر التحكم بشكل أساسي هو عنصر <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;
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;
تجربة "عيّنة"
جارٍ إضافة الحالة إلى عناصر التحكّم
يمكن أن تخزِّن عناصر التحكّم أيضًا الحالة. يتشابه المثال التالي مع ذلك
كما هو موضح من قبل، ولكن يحتوي عنصر التحكم على زر "تعيين الصفحة الرئيسية" الزر الذي
لضبط عنصر التحكم لعرض موقع المنزل الجديد. نقوم بذلك من خلال إنشاء
السمة 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;
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;