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

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

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

เพื่อให้ได้ประสิทธิภาพสูงสุด