نظرة عامة على عناصر التحكّم
تحتوي الخرائط المعروضة من خلال 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.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أو يوقِف عنصر التحكّم في نوع الخريطة الذي يتيح للمستخدم التبديل بين أنواع الخرائط (مثل الخريطة والقمر الصناعي). يكون عنصر التحكم هذا مرئيًا بشكل تلقائي ويظهر في أعلى الجانب الأيمن من الخريطة. بالإضافة إلى ذلك، يحدّد الحقلmapTypeControlOptionsMapTypeControlOptionsالمطلوب استخدامه لعنصر التحكّم هذا. - يفعِّل/يوقف
streetViewControlعنصر تحكم "الدليل" الذي يتيح للمستخدم تفعيل بانوراما "التجوّل الافتراضي". يكون عنصر التحكم هذا مرئيًا بشكل تلقائي ويظهر بالقرب من أسفل يسار الخريطة. بالإضافة إلى ذلك، يحدّد الحقلstreetViewControlOptionsStreetViewControlOptionsالمطلوب استخدامه لعنصر التحكّم هذا. - يفعّل
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 مناسب. (لمزيد من المعلومات عن هذه المواضع، راجع التحكم في تحديد الموضع أعلاه.)
وتخزِّن كل سمة 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;