نظرة عامة
قد يتطلب استخدام خريطة على صفحة ويب خيارات محددة للتحكم في الطريقة التي يتفاعل بها المستخدمون مع الخريطة للتكبير/التصغير والعرض الشامل. يتم تحديد هذه الخيارات، مثل gestureHandling
وminZoom
وmaxZoom
وrestriction
، ضمن واجهة MapOptions.
السلوك التلقائي
توضح الخريطة التالية السلوك التلقائي للتفاعلات مع الخريطة التي تم إنشاء مثيل لها باستخدام الخيارَين zoom
وcenter
فقط اللذين تم تحديدهما.
رمز هذه الخريطة هو أدناه.
TypeScript
new google.maps.Map(document.getElementById("map")!, { zoom, center, });
JavaScript
new google.maps.Map(document.getElementById("map"), { zoom, center, });
التحكم في التعامل مع الإيماءات
عندما يقوم المستخدم بالتمرير في صفحة تحتوي على خريطة، يمكن لإجراء التمرير تتسبب في تكبير/تصغير الخريطة عن غير قصد. يمكن التحكم في هذا السلوك باستخدام خيار الخريطة gestureHandling.
التعامل مع الإيماءة: cooperative
تستخدم الخريطة أدناه مجموعة الخيارات gestureHandling
إلى cooperative
، ما يتيح للمستخدم الانتقال في الصفحة بشكل طبيعي بدون استخدام التكبير
أو العرض الشامل للخريطة. يمكن للمستخدمين تكبير/تصغير الخريطة بالنقر فوق عناصر التحكم في التكبير/التصغير. هم
يمكنه أيضًا التكبير أو التصغير والتحريك باستخدام حركات بإصبعين على الخريطة لعرض الشاشة التي تعمل باللمس
الأجهزة.
رمز هذه الخريطة هو أدناه.
TypeScript
new google.maps.Map(document.getElementById("map")!, { zoom, center, gestureHandling: "cooperative", });
JavaScript
new google.maps.Map(document.getElementById("map"), { zoom, center, gestureHandling: "cooperative", });
التعامل مع الإيماءة: auto
الخريطة في أعلى الصفحة بدون الخيار gestureHandling
لها نفس
السلوك كالخريطة السابقة مع gestureHandling
تم ضبطها على cooperative
لأن جميع الخرائط في هذه الصفحة تقع داخل
<iframe>
قيمة gestureHandling التلقائية
يبدِّل "auto
" بين greedy
وcooperative
استنادًا إلى ما إذا كانت الخريطة
الموجودة في <iframe>
.
خريطة مضمّنة في <iframe> |
السلوك |
---|---|
نعم | cooperative |
لا | greedy |
التعامل مع الإيماءة: greedy
تم ضبط الخريطة التي تم فيها ضبط gestureHandling على greedy
أدناه. تتفاعل هذه الخريطة مع كل إيماءات اللمس وأحداث التنقّل، على عكس
cooperative
التعامل مع الإيماءة: none
يمكن أيضًا ضبط الخيار gestureHandling على
none
لإيقاف الإيماءات على الخريطة.
إيقاف العرض الشامل والتكبير/التصغير
لتعطيل إمكانية تحريك الخريطة وتكبيرها أو تصغيرها تمامًا، هناك خياران: gestureHandling يجب تضمين zoomControl.
TypeScript
new google.maps.Map(document.getElementById("map")!, { zoom, center, gestureHandling: "none", zoomControl: false, });
JavaScript
new google.maps.Map(document.getElementById("map"), { zoom, center, gestureHandling: "none", zoomControl: false, });
توضح الخريطة أدناه مجموعة gestureHandling zoomControl في الرمز أعلاه.
تقييد حدود الخريطة والتكبير/التصغير
قد يكون من المطلوب السماح بالإيماءات وعناصر التحكم في التكبير/التصغير لكن مع تقييد الخريطة حدود معينة أو حد أدنى وأقصى للتكبير. لتحقيق ذلك، يمكنك وضبط القيود وminZoom وmaxZoom. يتم إنشاء الكود والخريطة التاليين وتوضيح هذه الخيارات.
TypeScript
new google.maps.Map(document.getElementById("map")!, { zoom, center, minZoom: zoom - 3, maxZoom: zoom + 3, restriction: { latLngBounds: { north: -10, south: -40, east: 160, west: 100, }, }, });
JavaScript
new google.maps.Map(document.getElementById("map"), { zoom, center, minZoom: zoom - 3, maxZoom: zoom + 3, restriction: { latLngBounds: { north: -10, south: -40, east: 160, west: 100, }, }, });