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

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