خريطة جوجل - مع مجموعة التحكم الافتراضي:
خرائط جوجل - الافتراضي الضوابط
عندما تظهر خريطة جوجل القياسية، لأنه يأتي مع مجموعة التحكم الافتراضي:
- زووم - يعرض المنزلق أو "+/-" أزرار للتحكم في مستوى التكبير من الخريطة
- بان - يعرض عنصر تحكم القومية للبالغسل الخريطة
- MapType - يتيح تبديل المستخدم بين أنواع خريطة (roadmap and satellite)
- عرض الشارع - يعرض رمز الدليل الذي يمكن أن ننجر إلى الخريطة لتمكين عرض الشارع
خرائط جوجل - تحكم إضافية
بالإضافة إلى التحكم الافتراضية، لديها خرائط جوجل أيضا:
- على نطاق و- يعرض عنصر مقياس الخريطة
- تناوب - يعرض رمز دائري صغير الذي يسمح لك لتدوير الخرائط
- خريطة مصغرة - يعرض خريطة نظرة عامة مصغرة تعكس العرض خريطة الحالي ضمن مساحة أوسع
يمكنك تحديد أي ضوابط لتظهر عند إنشاء خريطة (inside MapOptions) أو عن طريق الاتصال setOptions() لتغيير خيارات للخريطة.
خرائط جوجل - تعطيل الافتراضي الضوابط
قد ترغب بدلا من ذلك إلى إيقاف التحكم الافتراضية.
للقيام بذلك، قم بتعيين الخاصية disableDefaultUI خريطة ل(داخل الكائن خيارات الخريطة) إلى true:
خرائط جوجل - إيقاف تشغيل جميع الضوابط
ويبدو أن بعض الضوابط على الخريطة بشكل افتراضي؛ في حين أن الآخرين لن تظهر إلا إذا قمت بتعيين لهم.
يتم تحديد إضافة أو إزالة عناصر من الخريطة في خريطة كائن الخيارات.
وضع وحدة التحكم إلى true لجعله مرئيا - وضع وحدة التحكم إلى false لإخفاء ذلك.
المثال التالي يتحول "on" جميع الضوابط:
مثال
panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true انها محاولة لنفسك » خرائط جوجل - تعديل ضوابط
العديد من الضوابط خريطة هي شكلي.
ضوابط يمكن تعديلها بواسطة تحديد خيارات التحكم المجالات.
على سبيل المثال، يتم تحديد خيارات لتعديل عنصر تحكم التكبير في مجال zoomControlOptions. قد يحتوي الحقل zoomControlOptions:
- google.maps.ZoomControlStyle.SMALL - يعرض عنصر تحكم مصغرة التكبير (فقط + و - أزرار)
- google.maps.ZoomControlStyle.LARGE - يعرض السيطرة على تكبير المنزلق القياسية
- google.maps.ZoomControlStyle.DEFAULT - يختار أفضل السيطرة على تكبير بناء على الجهاز وحجم خريطة
مثال
zoomControl:true,
zoomControlOptions: {
style:google.maps.ZoomControlStyle.SMALL
}
انها محاولة لنفسك » Note: إذا قمت بتعديل السيطرة، ودائما تمكين السيطرة أولا (set it to true) .
السيطرة شكلي آخر هو السيطرة MapType.
يتم تحديد خيارات لتعديل عنصر تحكم في مجال mapTypeControlOptions. قد يحتوي الحقل mapTypeControlOptions ::
- google.maps.MapTypeControlStyle.HORIZONTAL_BAR - عرض زر واحدة لكل نوع خريطة
- google.maps.MapTypeControlStyle.DROPDOWN_MENU - حدد نوع خريطة طريق القائمة المنسدلة
- google.maps.MapTypeControlStyle.DEFAULT - يعرض "default" السلوك (depends on screen size)
مثال
mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU
} انها محاولة لنفسك » يمكنك أيضا وضع عنصر تحكم، مع الخاصية ControlPosition:
مثال
mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position:google.maps.ControlPosition.TOP_CENTER
} انها محاولة لنفسك » خرائط جوجل - عناصر التحكم المخصصة
إنشاء عنصر تحكم مخصص الذي يأخذ دائما لكم مرة أخرى إلى لندن، عند النقر عليها (if the map is dragged) :
مثال
controlDiv.style.padding = '5px';
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'yellow';
controlUI.style.border='1px solid';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Set map to London';
controlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.style.fontFamily='Arial,sans-serif';
controlText.style.fontSize='12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = '<b>Home<b>'
controlUI.appendChild(controlText); انها محاولة لنفسك »