ภาพรวม
การใช้แผนที่บนหน้าเว็บอาจต้องใช้ตัวเลือกที่เฉพาะเจาะจงเพื่อควบคุมวิธีที่ผู้ใช้โต้ตอบกับแผนที่ในการซูมและเลื่อน ตัวเลือกเหล่านี้ เช่น gestureHandling
, minZoom
, maxZoom
และ restriction
กำหนดไว้ในอินเทอร์เฟซ MapOptions
ลักษณะการทำงานเริ่มต้น
แผนที่ต่อไปนี้แสดงการทำงานเริ่มต้นสำหรับการโต้ตอบแผนที่กับแผนที่ที่เกิดขึ้นโดยมีเฉพาะตัวเลือก zoom
และ center
ที่กำหนดไว้
รหัสสำหรับแผนที่นี้อยู่ด้านล่าง
TypeScript
new google.maps.Map(document.getElementById("map")!, { zoom, center, });
JavaScript
new google.maps.Map(document.getElementById("map"), { zoom, center, });
การควบคุมการจัดการท่าทางสัมผัส
เมื่อผู้ใช้เลื่อนหน้าเว็บที่มีแผนที่ การดำเนินการเลื่อนสามารถ ทำให้แผนที่ซูมโดยไม่ตั้งใจ คุณควบคุมลักษณะการทำงานนี้ได้โดยใช้ gestureHandling ของแผนที่ตัวเลือก
การจัดการด้วยท่าทางสัมผัส: cooperative
แผนที่ด้านล่างใช้ชุดตัวเลือก gestureHandling
เป็น cooperative
เพื่อให้ผู้ใช้เลื่อนหน้าเว็บได้ตามปกติโดยไม่ต้องซูม
หรือเลื่อนแผนที่ ผู้ใช้สามารถซูมแผนที่โดยคลิกตัวควบคุมการซูม โฆษณาเหล่านี้
นอกจากนี้ยังสามารถซูมและเลื่อนโดยใช้การเคลื่อนไหวด้วยนิ้ว 2 นิ้วบนแผนที่สำหรับหน้าจอสัมผัส
อุปกรณ์
รหัสสำหรับแผนที่นี้อยู่ด้านล่าง
TypeScript
new google.maps.Map(document.getElementById("map")!, { zoom, center, gestureHandling: "cooperative", });
JavaScript
new google.maps.Map(document.getElementById("map"), { zoom, center, gestureHandling: "cooperative", });
การจัดการด้วยท่าทางสัมผัส: 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, });
JavaScript
new google.maps.Map(document.getElementById("map"), { zoom, center, gestureHandling: "none", zoomControl: false, });
แผนที่ด้านล่างแสดงการรวม 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, }, }, });
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, }, }, });