نظرة عامة
قد يتطلب استخدام خريطة على صفحة ويب خيارات محددة للتحكم في الطريقة التي يتفاعل بها المستخدمون مع الخريطة للتكبير/التصغير والعرض الشامل. يتم تحديد هذه الخيارات، مثل 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 |
no | 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, }, }, });