Maps JavaScript API มีการใช้งานแผนที่ใน 2 แบบที่แตกต่างกัน ได้แก่ แรสเตอร์และเวกเตอร์ แผนที่แรสเตอร์จะโหลดโดยค่าเริ่มต้น และโหลดแผนที่เป็นตารางกริดของชิ้นส่วนรูปภาพแรสเตอร์แบบพิกเซล ซึ่งสร้างขึ้นจากฝั่งเซิร์ฟเวอร์ Google Maps Platform จากนั้นแสดงไปยังเว็บแอปของคุณ แผนที่เวกเตอร์ประกอบด้วยชิ้นส่วนแบบเวกเตอร์ซึ่งวาดเมื่อมีการโหลดในฝั่งไคลเอ็นต์โดยใช้ WebGL ซึ่งเป็นเทคโนโลยีเว็บที่ช่วยให้เบราว์เซอร์เข้าถึง GPU บนอุปกรณ์และแสดงผล D3 ของผู้ใช้ได้
แผนที่เวกเตอร์เป็นแบบเดียวกับแผนที่ Google ที่ผู้ใช้ของคุณคุ้นเคยดี และมีข้อดีมากกว่าแผนที่ย่อยแบบแรสเตอร์เริ่มต้น ที่สำคัญที่สุดคือความคมชัดของรูปภาพตามเวกเตอร์ และการเพิ่มสิ่งปลูกสร้าง 3 มิติในระดับการซูมใกล้ แผนที่เวกเตอร์ยังรองรับฟีเจอร์ใหม่บางอย่าง เช่น ความสามารถในการเพิ่มเนื้อหา 3 มิติด้วยมุมมองการวางซ้อน WebGL, การควบคุมการเอียงและทิศทางแบบเป็นโปรแกรม, การควบคุมกล้องที่มีประสิทธิภาพยิ่งขึ้น และการซูมเป็นส่วนๆ เพื่อให้ซูมได้ราบรื่นยิ่งขึ้น
ควบคุมกล้อง
ใช้ฟังก์ชัน map.moveCamera()
เพื่ออัปเดตคุณสมบัติต่างๆ ของกล้องหลายรายการพร้อมกัน map.moveCamera()
ยอมรับพารามิเตอร์เดียวที่มีพร็อพเพอร์ตี้กล้องทั้งหมดเพื่ออัปเดต ตัวอย่างต่อไปนี้แสดงการเรียกใช้ map.moveCamera()
เพื่อตั้งค่า center
, zoom
, heading
และ tilt
พร้อมกัน
map.moveCamera({
center: new google.maps.LatLng(37.7893719, -122.3942),
zoom: 16,
heading: 320,
tilt: 47.5
});
คุณสร้างภาพเคลื่อนไหวของพร็อพเพอร์ตี้กล้องได้โดยเรียกใช้ map.moveCamera()
ด้วยลูปภาพเคลื่อนไหวดังที่แสดงด้านล่างนี้
const degreesPerSecond = 3;
function animateCamera(time) {
// Update the heading, leave everything else as-is.
map.moveCamera({
heading: (time / 1000) * degreesPerSecond
});
requestAnimationFrame(animateCamera);
}
// Start the animation.
requestAnimationFrame(animateCamera);
การซูมแบบเศษส่วน
แผนที่เวกเตอร์รองรับการซูมแบบเศษส่วน ซึ่งช่วยให้คุณซูมโดยใช้ค่าเศษส่วนแทนจำนวนเต็มได้ แม้ว่าทั้งแผนที่แรสเตอร์และแผนที่เวกเตอร์จะรองรับการซูมแบบบางส่วน แต่การซูมแบบบางส่วนจะเปิดอยู่โดยค่าเริ่มต้นสำหรับแผนที่เวกเตอร์ และปิดใช้โดยค่าเริ่มต้นสำหรับแผนที่แรสเตอร์ ใช้ตัวเลือกแผนที่ isFractionalZoomEnabled
เพื่อเปิดและปิดการซูมบางส่วน
ตัวอย่างต่อไปนี้แสดงการเปิดใช้การซูมเป็นส่วนๆ เมื่อเริ่มต้นแผนที่
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8,
isFractionalZoomEnabled: true
});
คุณยังสามารถเปิดและปิดการซูมบางส่วนได้โดยตั้งค่าตัวเลือกแผนที่ isFractionalZoomEnabled
ตามที่แสดงไว้ที่นี่
// Using map.set
map.set('isFractionalZoomEnabled', true);
// Using map.setOptions
map.setOptions({isFractionalZoomEnabled: true});
คุณตั้งค่า Listener ให้ตรวจหาว่าเปิดการซูมแบบบางส่วนได้หรือไม่ ซึ่งจะเป็นประโยชน์มากที่สุดหากไม่ได้ตั้งค่า isFractionalZoomEnabled
เป็น true
หรือ false
อย่างชัดแจ้ง โค้ดตัวอย่างต่อไปนี้จะตรวจสอบว่ามีการเปิดใช้การซูมบางส่วนหรือไม่
map.addListener('isfractionalzoomenabled_changed', () => {
const isFractionalZoomEnabled = map.get('isFractionalZoomEnabled');
if (isFractionalZoomEnabled === false) {
console.log('not using fractional zoom');
} else if (isFractionalZoomEnabled === true) {
console.log('using fractional zoom');
} else {
console.log('map not done initializing yet');
}
});