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

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

ดูตัวอย่าง

gestureHandling: auto

แผนที่ที่ด้านบนของหน้าซึ่งไม่มีตัวเลือก gestureHandling จะมีลักษณะการทำงานเหมือนกับแผนที่ก่อนหน้าที่มี gestureHandling ตั้งค่าเป็น cooperative เนื่องจากแผนที่ทั้งหมดในหน้านี้อยู่ภายใน <iframe> ค่าเริ่มต้นของ gestureHandling auto จะสลับระหว่าง greedy กับ cooperative โดยขึ้นอยู่กับว่าแผนที่อยู่ภายใน <iframe> หรือไม่

แผนที่ที่อยู่ใน <iframe> พฤติกรรม
ใช่ cooperative
ไม่ greedy

gestureHandling: greedy

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

gestureHandling: 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