مجموعة التحكم في خريطة Google
خرائط Google - إعدادات التحكم الافتراضية:
عند استخدام خرائط Google قياسية ، تكون إعداداتها الافتراضية كما يلي:
1.zoom - أظهر شريط منزلق للتحكم في مستوى التكبير للخريطة
2.PPAN- تُظهر الخريطة عنصر تحكم يشبه وعاء القاع المسطح ، انقر فوق 4 زوايا لتصفية الخريطة
3.MAPTYPE - يتيح للمستخدمين التبديل بين أنواع الخريطة (خريطة الطريق والأقراء)
4. Streetview - معروضة كرمز VILEAN VIEW ، يمكنك السحب إلى نقطة على الخريطة لفتح منظر الشارع
خرائط Google - المزيد من مجموعات التحكم
بالإضافة إلى مجموعة التحكم الافتراضية أعلاه ، لدى Google أيضًا:
.scale - عرض خريطة العرض
.rotate - يظهر أيقونة محيط صغيرة يمكنها تدوير الخريطة
.
عند إنشاء خريطة ، يمكنك تحديد مجموعات التحكم التي يتم عرضها من خلال خيارات الإعداد أو تغيير خيارات إعداد الخريطة عن طريق استدعاء SetOptions ().
خرائط Google - قم بإيقاف تشغيل مجموعة التحكم الافتراضية
قد ترغب في أن تكون قادرًا على إيقاف تشغيل مجموعة التحكم الافتراضية.
لإيقاف تشغيل مجموعة التحكم الافتراضية ، قم بتعيين خاصية DisabledeFaultui للخريطة إلى True:
مثال
<html> <head> <criptsrc = "http://maps.googleapis.com/maps/api/js؟key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </script> google.maps.latlng (51.508742 ، -0.120850) ، Zoom: 7 ، disabledefaultui: true ، maptypeid: google.maps.maptypeid.roadmap} ؛ var map = new Google.maps.map (document.getElementById ("googlemap") ، mapProp) ؛} google.maps.event.adddomlistener (window ، 'load' ، initial) ؛ </script> </head> <body> <div id = "googlemapخرائط Google - افتح جميع مجموعات التحكم
تظهر بعض مجموعات التحكم على الخريطة افتراضيًا ، في حين أن البعض الآخر لا ، إلا إذا قمت بتعيينها.
اضبط عنصر التحكم على True لجعله مرئيًا - اضبط عنصر التحكم على خطأ لإخفائه.
يمكّن المثال التالي جميع عناصر التحكم:
مثال
<html> <head> <criptsrc = "http://maps.googleapis.com/maps/api/js؟key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </script> google.maps.latlng (51.508742 ، -0.120850) ، Zoom: 7 ، pancontrol: true ، ZoomControl: true ، maptypecontrol: true ، scalecontrol: true ، streetviewControl: true ، overviewcontrol: true ، rotatecontrol: } ؛ var map = new Google.maps.map (document.getElementById ("googlemap") ، mapProp) ؛} google.maps.event.adddomlistener (window ، 'load' ، initial) ؛ </script> </head> <body> <div id = "googlemapخرائط Google - تعديل مجموعة التحكم
بعض عناصر التحكم في الخريطة قابلة للتكوين. قم بتغيير عنصر التحكم الذي تم تعيينه عن طريق صياغة حقل خيار التحكم.
F على سبيل المثال ، يتم تحديد خيار تعديل التحكم في التكبير في ZoomControloptions. يحتوي ZoomControloptions على الخيارات الثلاثة التالية:
1.Google.maps.zoomcontrolstyle.small - عرض التحكم في التكبير
2.google.maps.zoomcontrolstyle.large - عرض عناصر تحكم تقويم للتكبير القياسية
3.google.maps.zoomcontrolstyle.default-select أنسب عنصر تحكم استنادًا إلى حجم الجهاز وحجم الخريطة
مثال
<html> <head> <criptsrc = "http://maps.googleapis.com/maps/api/js؟key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </script> google.maps.latlng (51.508742 ، -0.120850) ، Zoom: 7 ، ZoomControl: True ، ZoomControloptions: {style: google.maps.zoomcontrolstyle.small} ، maptypeid: google.mapt.maptypeid.oodmap. var map = new Google.maps.map (document.getElementById ("googlemap") ، mapProp) ؛} google.maps.event.adddomlistener (window ، 'load' ، initial) ؛ </script> </head> <body> <div id = "googlemapملاحظة: إذا كنت بحاجة إلى تعديل عنصر تحكم ، فقم أولاً بتشغيل عنصر التحكم (اضبطه على TRUE).
عنصر تحكم آخر هو التحكم في MAPTYPE.
يمكن عرض التحكم في MAPTYPE كواحد من خيارات النمط التالية:
1.Google.maps.maptypecontrolstyle.horizontal_bar ، يستخدم لعرض مجموعة من عناصر التحكم كأزرار كما هو موضح في خرائط Google في الشريط الأفقي.
2.google.maps.maptypecontrolstyle.dropdown_menu ، لعرض عنصر تحكم زر واحد بحيث يمكنك تحديد نوع الخريطة من القائمة المنسدلة.
3.google.maps.maptypecontrolstyle.default ، المستخدمة لعرض السلوك "الافتراضي" ، والذي يعتمد على حجم الشاشة وقد يتغير في الإصدارات اللاحقة من واجهة برمجة التطبيقات.
مثال
<html> <head> <criptsrc = "http://maps.googleapis.com/maps/api/js؟key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </script> google.maps.latlng (51.508742 ، -0.120850) ، Zoom: 7 ، MaptyPecontrol: True ، MaptypeControloptions: {style: google.maps.maptypeid.mapeid.mapeid.mapeid.mapeid. var map = new Google.maps.map (document.getElementById ("googlemap") ، mapProp) ؛} google.maps.event.adddomlistener (window ، 'load' ، initial) ؛ </script> </head> <body> <div id = "googlemapأيضًا ، يمكنك استخدام خاصية ControlPosition لتحديد موقع عنصر التحكم:
<html> <head> <criptsrc = "http://maps.googleapis.com/maps/api/js؟key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoiym&sensor=false"> </script> google.maps.latlng (51.508742 ، -0.120850) ، Zoom: 7 ، maptypecontrol: true ، maptypecontroloptions: {style: google.maps.maptypecontrolstyle google.maps.maptypeid.roadmap} ؛ var map = new Google.maps.map (document.getElementById ("googlemap") ، mapProp) ؛} google.maps.event.adddomlistener (window ، 'load' ، initial) ؛ </script> </head> <body> <div id = "googlemapخرائط Google - مجموعة التحكم المخصصة
قم بإنشاء عنصر تحكم مخصص للعودة إلى لندن للنقر فوق الأحداث: (إذا تم سحب الخريطة):
مثال
<html> <head> <criptsrc = "http://maps.googleapis.com/maps/api/js؟key=aizasydy0kkjitpvd2u7atoawhc9ysh6ohxoim&sensor=false"> </script> var london = google.maps.latlng (51.508742 ، -0.120850) ؛ // إضافة عنصر تحكم في المنزل يعيد المستخدم إلى Homecontrol LondonFunction (Controldiv ، MAP) {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) ؛ // Setup Click-event Beasher: ما عليك سوى تعيين الخريطة إلى London Google.maps.event.adddomListener (Controlui ، "Click '، function () {map.setCenter (London)}) ؛} function initialize () {var mapdiv = document.getElementById (' 'googlemap') ؛ var myoptions = {Zoom: 12 ، المركز: لندن ، maptypeid: google.maps.maptypeid.roadmap} map = new Google.maps.map (mapDiv ، myOptions) ؛ // إنشاء div لعقد السيطرة واستدعاء homecontrol () var homecontroldiv = document.createElement ('div') ؛ var homecontrol = new homecontrol (homecontroldiv ، map) ؛ // homecontroldiv.index = 1 ؛ map.controls [google.maps.controlposition.top_right] .push (homecontroldiv) ؛} google.maps.event.adddomlistener (window ، 'load' ، initive) ؛ </script> </head>ما سبق هو المعلومات التي تقوم بفرز مجموعة التحكم في خريطة Google. سوف نستمر في إضافة المعرفة ذات الصلة في المستقبل. آمل أن يكون الأصدقاء الذين يمكنهم المساعدة في تطوير تطبيقات خريطة Google. شكرا لك على دعمك لهذا الموقع!