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

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