การควบคุมการซูมและการเลื่อน

จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
เลือกแพลตฟอร์ม: 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 ซึ่งช่วยให้ผู้ใช้เลื่อนหน้าตามปกติได้โดยไม่ต้องซูมหรือเลื่อนแผนที่ ผู้ใช้สามารถซูมแผนที่ได้โดยคลิกที่ตัวควบคุมการซูม ผู้ใช้ยังซูมและเลื่อนได้โดยใช้การเคลื่อนไหว 2 นิ้วบนแผนที่สําหรับอุปกรณ์หน้าจอสัมผัส

รหัสสําหรับแผนที่นี้อยู่ด้านล่าง

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> ค่าเริ่มต้นของ gestureHandlingauto จะสลับระหว่าง greedy และ cooperative โดยขึ้นอยู่กับว่าแผนที่มีอยู่ภายใน <iframe> หรือไม่

แผนที่อยู่ภายใน <iframe> ลักษณะการทำงาน
ใช่ cooperative
no greedy

การจัดการท่าทางสัมผัส: greedy

แผนที่ที่มีการตั้งค่า gestureHandling เป็น greedy อยู่ด้านล่าง แผนที่นี้ตอบสนองต่อท่าทางสัมผัสแบบสัมผัสทั้งหมดและเหตุการณ์การเลื่อน ซึ่งแตกต่างจาก cooperative

การจัดการท่าทางสัมผัส: none

นอกจากนี้ยังตั้งค่าตัวเลือก gestureHandling เป็น none เพื่อปิดใช้ท่าทางสัมผัสบนแผนที่ได้ด้วย

การปิดใช้การเลื่อนและการซูม

ในการปิดใช้ความสามารถในการเลื่อนและซูมทั้งหมด คุณต้องรวม 2 ตัวเลือก ได้แก่ 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