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

اختيار النظام الأساسي: 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,
    },
  },
});