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

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

نظرة عامة

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

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",
});

عرض نموذج

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

JavaScript

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

توضّح الخريطة أدناه كيفية الجمع بين 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,
    },
  },
});

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