Bản đồ Vector

API JavaScript của Maps cung cấp hai cách triển khai khác nhau của 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 lưới các ô hình ảnh đường quét dựa trên pixel, được tạo bởi phía máy chủ của Google Maps Platform, sau đó được phân phát cho ứ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 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ị của người dùng để hiển thị đồ hoạ 2D và 2D.

Bản đồ vectơ giống với bản đồ Google mà người dùng của bạn đã quen dùng và mang lại một số lợi thế so với bản đồ xếp kề đườ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 tòa 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 với tính năng Lớp phủ WebGL, chế độ nghiêng có lập trình và điều khiển tiêu đề, điều khiển máy ảnh nâng cao và thu phóng theo phân đoạn để thu phóng mượt mà hơn.

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

Đ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 máy ảnh cùng một lúc. map.moveCamera() chấp nhận một thông 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 việc 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ạ 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 phân số

Bản đồ vectơ hỗ trợ 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à vectơ đều hỗ trợ tính năng thu phóng phân số, nhưng tính năng thu phóng theo phân đoạn được bật theo mặc định đối với bản đồ vectơ và được tắt theo mặc định đối với bản đồ đường quét. Sử dụng tùy chọn bản đồ isFractionalZoomEnabled để bật và tắt tính năng thu phóng theo phân số.

Ví dụ sau đây cho thấy việc bật tính năng thu phóng theo phân đoạn khi khởi chạy 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 phân số bằng cách đặt tuỳ chọn bản đồ isFractionalZoomEnabled như sau:

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

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

Bạn có thể đặt một trình nghe để phát hiện xem tính năng thu phóng từng phần có đang bật hay không. Việc này rất hữu ích nếu bạn chưa đặt isFractionalZoomEnabled thành true hoặc false một cách rõ ràng. Mã ví dụ sau đây 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');
  }
});