Bản đồ Vector

API Maps JavaScript cung cấp hai cách triển khai bản đồ: đường quét và vectơ. Theo mặc định, bản đồ đường quét sẽ được tải và tải bản đồ dưới dạng lưới các ô hình ảnh đường quét dựa trên pixel do phía máy chủ của Google Maps Platform tạo ra, sau đó phân phát đến ứng dụng web của bạn. Bản đồ vectơ bao gồm các ô dựa trên vectơ được vẽ tại thời điểm tải ở phía máy khách bằ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ị của người dùng để kết xuất đồ hoạ 2D và 3D.

Bản đồ vectơ cũng chính là bản đồ Google mà người dùng của bạn quen sử dụng và mang lại một số lợi thế 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 bổ sung các 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, tính năng điều khiển hướng và độ nghiêng theo lập trình, tính năng điều khiển máy ảnh nâng cao và tính năng thu phóng theo tỷ lệ để thu phóng mượt mà hơn.

Bắt đầu sử dụng Bản đồ vectơ

Điều khiển camera

Sử dụng hàm map.moveCamera() để cập nhật mọi tổ hợp thuộc tính camera 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() để thiết lập 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ạ dưới đây:

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 theo tỷ lệ

Bản đồ vectơ hỗ trợ tính năng thu phóng theo tỷ lệ, cho phép bạn thu phóng bằng các giá trị phân số thay vì số nguyên. Mặc dù cả bản đồ đường quét và vectơ đều hỗ trợ tính năng thu phóng theo tỷ lệ, nhưng tính năng này sẽ 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 tính năng thu phóng phân đoạn.

Ví dụ sau đây cho thấy cách bật tính năng thu phóng theo tỷ lệ 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 theo tỷ lệ 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ể đặt trình nghe để phát hiện xem tính năng thu phóng theo tỷ lệ có được bật hay không; điều này hữu ích nhất nếu bạn chưa đặt rõ ràng isFractionalZoomEnabled thành true hoặc false. Mã ví dụ sau đây sẽ kiểm tra xem bạn đã bật tính năng thu phóng theo tỷ lệ hay chưa:

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