نظرة عامة على عناصر التحكّم
تحتوي الخرائط المعروضة من خلال واجهة برمجة تطبيقات JavaScript للخرائط على عناصر واجهة المستخدم للسماح بتفاعل المستخدم مع الخريطة. تُعرف هذه العناصر باسم عناصر التحكّم ويمكنك تضمين صيغ مختلفة من عناصر التحكّم هذه في تطبيقك. وبدلاً من ذلك، لا يمكنك اتّخاذ أي إجراء والسماح لتطبيق Maps JavaScript API بالتعامل مع كل سلوك التحكّم.
تعرض الخريطة التالية المجموعة التلقائية لعناصر التحكّم التي تعرضها واجهة برمجة تطبيقات JavaScript في "خرائط Google":
إليك قائمة بالمجموعة الكاملة من عناصر التحكم التي يمكنك استخدامها في خرائطك:
- يعرض عنصر التحكم في التكبير أو التصغير الزرين "+" و "-" لتغيير مستوى تكبير الخريطة. يظهر عنصر التحكّم هذا تلقائيًا في أسفل يسار الخريطة.
- يتوفّر عنصر التحكّم في نوع الخريطة في نمط شريط منسدلة
أو على شكل زر أفقي، ما يسمح للمستخدم باختيار نوع الخريطة
(
ROADMAPأوSATELLITEأوHYBRIDأوTERRAIN). ويظهر عنصر التحكّم هذا تلقائيًا في أعلى يمين الخريطة. - يحتوي عنصر التحكّم في "التجوّل الافتراضي" على رمز "الدليل" الذي يمكن سحبه إلى الخريطة لتفعيل ميزة "التجوّل الافتراضي". يظهر عنصر التحكّم هذا تلقائيًا بالقرب من أسفل يسار الخريطة.
- يوفر عنصر التحكم في التدوير مجموعة من خيارات الإمالة والتدوير للخرائط التي تحتوي على صور مائلة. يظهر عنصر التحكّم هذا تلقائيًا بالقرب من أسفل يسار الخريطة. يمكنك الاطّلاع على صور بزاوية 45 درجة للحصول على مزيد من المعلومات.
- يعرض عنصر التحكم في المقياس عنصر مقياس على الخريطة. تم إيقاف عنصر التحكّم هذا تلقائيًا.
- يوفر عنصر التحكم في وضع ملء الشاشة خيار فتح الخريطة في وضع ملء الشاشة. يتم تفعيل عنصر التحكّم هذا تلقائيًا على أجهزة الكمبيوتر المكتبي والأجهزة الجوّالة. ملاحظة: لا يتوافق نظام التشغيل iOS مع ميزة ملء الشاشة. وبالتالي، لا يظهر عنصر التحكّم بملء الشاشة على الأجهزة التي تعمل بنظام التشغيل iOS.
- يعرض عنصر التحكّم في اختصارات لوحة المفاتيح قائمة باختصارات لوحة المفاتيح للتفاعل مع الخريطة.
ولا يمكنك الوصول إلى عناصر التحكّم على الخريطة هذه أو تعديلها مباشرةً. بدلاً من ذلك، يمكنك تعديل حقول MapOptions التي تؤثر في إذن الوصول وعناصر التحكم في العرض التقديمي. يمكنك تعديل عرض التحكم عند إنشاء خريطة (باستخدام MapOptions المناسبة) أو تعديل خريطة ديناميكيًا من خلال الاتصال بـ setOptions() لتغيير خيارات الخريطة.
لا يتم تفعيل كل عناصر التحكّم هذه تلقائيًا. للاطّلاع على معلومات عن سلوك واجهة المستخدم التلقائية (وكيفية تعديل هذا السلوك)، يُرجى الاطّلاع على واجهة المستخدم التلقائية أدناه.
واجهة المستخدم التلقائية
بشكلٍ تلقائي، تختفي جميع عناصر التحكم إذا كانت الخريطة صغيرة جدًا (200×200 بكسل). يمكنك إلغاء هذا السلوك من خلال ضبط عنصر التحكّم بشكل واضح ليكون مرئيًا. اطّلِع على إضافة عناصر تحكّم إلى الخريطة.
يكون سلوك عناصر التحكّم ومظهرها متماثلاً على جميع الأجهزة الجوّالة وأجهزة الكمبيوتر المكتبي، باستثناء عنصر التحكّم في وضع ملء الشاشة (راجِع السلوك الموضّح في قائمة عناصر التحكّم).
بالإضافة إلى ذلك، يتم تفعيل التعامل مع لوحة المفاتيح تلقائيًا على جميع الأجهزة.
إيقاف واجهة المستخدم التلقائية
قد تحتاج إلى إيقاف أزرار واجهة المستخدم التلقائية لواجهة برمجة التطبيقات بشكل كامل. لإجراء ذلك،
اضبط السمة disableDefaultUI للخريطة (ضمن الكائن MapOptions) على true. يوقف هذا الموقع أي أزرار تحكّم في واجهة المستخدم من API للخرائط في 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
}
بشكلٍ تلقائي، تختفي جميع عناصر التحكّم إذا كان حجم الخريطة أصغر من 200x200 بكسل.
يمكنك إلغاء هذا السلوك من خلال ضبط عنصر التحكّم بشكل واضح ليكون
مرئيًا. على سبيل المثال، يعرض الجدول التالي ما إذا كان عنصر التحكّم في التكبير أو التصغير مرئيًا أم لا، استنادًا إلى حجم الخريطة وإعدادات الحقل 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تفعيل/إيقاف عنصر التحكّم في Zoom. يكون عنصر التحكّم هذا مرئيًا بشكل تلقائي ويظهر بالقرب من أسفل يسار الخريطة. بالإضافة إلى ذلك، يحدّد الحقل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 مناسبة. (للحصول على معلومات عن هذه المواضع، يُرجى الاطّلاع على التحكّم في موضع الإعلان أعلاه).
ويخزّن كل عنصر 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;