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

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');
  }
});