ภาพรวม
การใช้แผนที่บนหน้าเว็บอาจต้องใช้ตัวเลือกที่เฉพาะเจาะจงในการควบคุมวิธีที่ผู้ใช้โต้ตอบกับแผนที่เพื่อซูมและเลื่อน ตัวเลือกเหล่านี้ เช่น 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 ในโค้ดด้านบน
การจำกัดขอบเขตแผนที่และการซูม
เราขอแนะนำให้ใช้ท่าทางสัมผัสและตัวควบคุมการซูม แต่ให้จำกัดแผนที่ไว้ในขอบเขตที่เจาะจงหรือการซูมต่ำสุดและสูงสุด หากต้องการดำเนินการดังกล่าว ให้คุณตั้งค่าตัวเลือกข้อจำกัด, 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, }, }, });