ภาพรวม
การใช้แผนที่ในหน้าเว็บอาจต้องใช้ตัวเลือกที่เฉพาะเจาะจงเพื่อควบคุมวิธีที่ผู้ใช้โต้ตอบกับแผนที่เพื่อซูมและเลื่อน ตัวเลือกเหล่านี้ เช่น 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>
ค่าเริ่มต้นของ 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, });
JavaScript
new google.maps.Map(document.getElementById("map"), { zoom, center, gestureHandling: "none", zoomControl: false, });
แผนที่ด้านล่างแสดงชุดค่าผสมของ 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, }, }, });
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, }, }, });