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

اختيار النظام الأساسي: 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 في الرمز أعلاه.

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

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