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

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

عرض نموذج

التعامل مع الإيماءة: auto

الخريطة في أعلى الصفحة بدون الخيار gestureHandling لها نفس السلوك كالخريطة السابقة مع gestureHandling تم ضبطها على cooperative لأن جميع الخرائط في هذه الصفحة تقع داخل <iframe> تؤدي القيمة التلقائية gestureHandling auto إلى التبديل بين greedy وcooperative استنادًا إلى ما إذا كانت الخريطة مضمّنة في <iframe>.

خريطة مضمّنة في <iframe> السلوك
نعم cooperative
لا greedy

التعامل مع الإيماءة: greedy

تم ضبط الخريطة التي تم فيها ضبط gestureHandling على greedy أدناه. تستجيب هذه الخريطة لجميع إيماءات اللمس وأحداث الانتقال إلى أعلى أو أسفل الصفحة على عكس cooperative.

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