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

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

แผนที่อยู่ใน <iframe> ลักษณะการทำงาน
ใช่ cooperative
ไม่ 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