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

เลือกแพลตฟอร์ม 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 ในโค้ดด้านบน

การจำกัดขอบเขตและการซูมแผนที่

คุณอาจต้องการอนุญาตให้ควบคุมด้วยท่าทางสัมผัสและการซูม แต่จำกัดแผนที่ไว้เฉพาะ ขอบเขตที่เฉพาะเจาะจง หรือระดับการซูมต่ำสุดและสูงสุด เพื่อให้บรรลุวัตถุประสงค์นี้ คุณอาจ ตั้งค่า restriction, 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