التحكّم في التكبير/التصغير والتحريك

اختيار النظام الأساسي: Android iOS JavaScript

نظرة عامة

قد يتطلّب استخدام خريطة على صفحة ويب خيارات محدّدة للتحكّم في طريقة تفاعل المستخدمين مع الخريطة لتكبيرها وتصغيرها وتحريكها. يتم تحديد هذه الخيارات، مثل gestureHandling وminZoom وmaxZoom وrestriction، ضمن واجهة MapOptions.

الإعداد التلقائي

توضّح الخريطة التالية السلوك التلقائي لتفاعلات الخريطة مع خريطة تم إنشاء مثيل لها باستخدام الخيارَين zoom وcenter فقط.

يمكنك الاطّلاع على رمز هذه الخريطة أدناه.

TypeScript

new google.maps.Map(document.getElementById("map")!, {
  zoom,
  center,
});
index.ts

JavaScript

new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
});
index.js

التحكّم في معالجة الإيماءات

عندما يمرّر المستخدم صفحة تحتوي على خريطة، قد يؤدي إجراء التمرير إلى تكبير الخريطة عن غير قصد. يمكن التحكّم في هذا السلوك باستخدام خيار الخريطة gestureHandling.

gestureHandling: cooperative

تستخدِم الخريطة أدناه الخيار gestureHandling الذي تم ضبطه على cooperative، ما يتيح للمستخدم تصفّح الصفحة بشكل عادي بدون تكبير الخريطة أو تحريكها. يمكن للمستخدمين تكبير الخريطة أو تصغيرها من خلال النقر على عناصر التحكّم في التكبير/التصغير. يمكنهم أيضًا تكبير الخريطة وتصغيرها وتحريكها باستخدام إصبعين على الأجهزة التي تعمل باللمس.

يمكنك الاطّلاع على رمز هذه الخريطة أدناه.

TypeScript

new google.maps.Map(document.getElementById("map")!, {
  zoom,
  center,
  gestureHandling: "cooperative",
});
index.ts

JavaScript

new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
  gestureHandling: "cooperative",
});
index.js

عرض عيّنة

gestureHandling: auto

تتضمّن الخريطة في أعلى الصفحة بدون الخيار gestureHandling السلوك نفسه الذي تتضمّنه الخريطة السابقة مع ضبط gestureHandling على cooperative، لأنّ جميع الخرائط في هذه الصفحة تقع ضمن <iframe>. تتغيّر قيمة gestureHandling التلقائية auto بين greedy وcooperative استنادًا إلى ما إذا كانت الخريطة مضمّنة في <iframe>.

خريطة مضمّنة في <iframe> السلوك
نعم cooperative
لا greedy

gestureHandling: greedy

في ما يلي خريطة تم ضبط gestureHandling فيها على greedy. تتفاعل هذه الخريطة مع جميع إيماءات اللمس وأحداث التمرير، على عكس cooperative.

gestureHandling: none

يمكن أيضًا ضبط الخيار gestureHandling على none لإيقاف الإيماءات على الخريطة.

إيقاف ميزة "التحريك والتكبير/التصغير"

لإيقاف إمكانية تحريك الخريطة وتكبيرها/تصغيرها بالكامل، يجب تضمين الخيارَين gestureHandling وzoomControl.

TypeScript

new google.maps.Map(document.getElementById("map")!, {
  zoom,
  center,
  gestureHandling: "none",
  zoomControl: false,
});
index.ts

JavaScript

new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
  gestureHandling: "none",
  zoomControl: false,
});
index.js

توضّح الخريطة أدناه كيفية الجمع بين gestureHandling و zoomControl في الرمز البرمجي أعلاه.

تقييد حدود الخريطة ومستوى التكبير/التصغير

قد يكون من المرغوب فيه السماح بالإيماءات وعناصر التحكّم في التكبير/التصغير ولكن حصر الخريطة في حدود معيّنة أو في مستوى تكبير/تصغير أدنى وأقصى. لإجراء ذلك، يمكنك ضبط الخيارات restriction و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,
    },
  },
});
index.ts

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,
    },
  },
});
index.js