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

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

الاطّلاع على النموذج

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