Bản đồ Vector

API JavaScript của Maps cung cấp hai cách triển khai khác nhau cho bản đồ: đường quét và vectơ. Bản đồ đường quét được tải theo mặc định và tải bản đồ dưới dạng một lưới gồm các ô hình ảnh đường quét dựa trên pixel do phía máy chủ của Nền tảng Google Maps tạo ra. Bản đồ vectơ này bao gồm các ô dựa trên vectơ được vẽ tại thời điểm tải trên phía máy khách bằng cách sử dụng WebGL, một công nghệ web cho phép trình duyệt truy cập vào GPU trên thiết bị đồ hoạ 3D của người dùng để hiển thị 2D.

Bản đồ vectơ cũng giống như bản đồ Google mà người dùng đã quen sử dụng và mang lại một số ưu điểm so với bản đồ ô đường quét mặc định, đáng chú ý nhất là độ sắc nét của hình ảnh dựa trên vectơ và việc thêm toà nhà 3D ở mức thu phóng gần. Bản đồ vectơ cũng hỗ trợ một số tính năng mới, chẳng hạn như khả năng thêm nội dung 3D bằng Chế độ xem lớp phủ WebGL, điều khiển nghiêng và tiêu đề có lập trình, điều khiển máy ảnh nâng cao và thu phóng phân đoạn để thu phóng mượt mà hơn.

Bắt đầu sử dụng Vector Maps

Điều khiển camera

Dùng hàm map.moveCamera() để cập nhật mọi tổ hợp thuộc tính máy ảnh cùng một lúc. map.moveCamera() chấp nhận một tham số duy nhất chứa tất cả các thuộc tính máy ảnh cần cập nhật. Ví dụ sau đây cho thấy cách gọi map.moveCamera() để đặt center, zoom, heading và tilt cùng một lúc:

map.moveCamera({
  center: new google.maps.LatLng(37.7893719, -122.3942),
  zoom: 16,
  heading: 320,
  tilt: 47.5
});

Bạn có thể tạo ảnh động cho các thuộc tính của máy ảnh bằng cách gọi map.moveCamera() với một vòng lặp ảnh động, như minh hoạ bên dưới:

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

Thu phóng phân số

Bản đồ vectơ hỗ trợ tính năng thu phóng phân số, cho phép bạn thu phóng bằng cách sử dụng giá trị phân số thay vì số nguyên. Mặc dù cả bản đồ đường quét và bản đồ vectơ đều hỗ trợ khả năng thu phóng phân số, nhưng tính năng thu phóng phân số sẽ được bật theo mặc định đối với bản đồ vectơ và tắt theo mặc định đối với bản đồ đường quét. Sử dụng tuỳ chọn bản đồ isFractionalZoomEnabled để bật và tắt chế độ thu phóng theo tỷ lệ.

Ví dụ sau cho thấy cách bật tính năng thu phóng phân số khi khởi tạo bản đồ:

map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  isFractionalZoomEnabled: true
});

Bạn cũng có thể bật và tắt tính năng thu phóng phân số bằng cách đặt tuỳ chọn bản đồ isFractionalZoomEnabled như minh hoạ dưới đây:

// Using map.set
map.set('isFractionalZoomEnabled', true);

// Using map.setOptions
map.setOptions({isFractionalZoomEnabled: true});

Bạn có thể thiết lập trình nghe để phát hiện xem có bật tính năng thu phóng phân số hay không. Cách này hữu ích nhất nếu bạn chưa thiết lập rõ ràng isFractionalZoomEnabled thành true hoặc false. Mã ví dụ sau đây sẽ kiểm tra xem tính năng thu phóng phân số có được bật hay không:

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