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