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

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

التعامل مع الإيماءة: 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

التعامل مع الإيماءة: 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