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

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