แผนที่เวกเตอร์

Maps JavaScript API นําเสนอการใช้งานแผนที่ 2 แบบที่ต่างกัน ได้แก่ แรสเตอร์และเวกเตอร์ โดยค่าเริ่มต้น แผนที่แรสเตอร์จะโหลดโดยค่าเริ่มต้น และโหลดแผนที่เป็นตารางภาพแรสเตอร์โดยอิงตามพิกเซล ซึ่งสร้างขึ้นโดยฝั่งเซิร์ฟเวอร์ของ Google Maps Platform จากนั้นจึงแสดงเว็บแอปของคุณ แผนที่เวกเตอร์จะประกอบไปด้วยชิ้นส่วนแบบเวกเตอร์ที่วาดขึ้นตามเวลาโหลดบนฝั่งไคลเอ็นต์โดยใช้ WebGL ซึ่งเป็นเทคโนโลยีเว็บที่ช่วยให้เบราว์เซอร์เข้าถึง GPU บนอุปกรณ์กราฟิก 3 และบนอุปกรณ์2 ของผู้ใช้3D และกราฟิก3D บนอุปกรณ์2

แผนที่เวกเตอร์เป็นแผนที่ 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');
  }
});