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 đồ raster được tải theo mặc định và tải bản đồ dưới dạng một lưới ô hình ảnh đường quét dựa trên pixel do Nền tảng Google Maps tạo ra phía máy chủ, sau đó được phân phát tới ứ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 để kết xuất đồ hoạ 2D và 3D.

Bản đồ vectơ giống với bản đồ Google mà người dùng của bạn đã quen thuộc với việc sử dụng và cung cấp 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à thêm các toà nhà 3D khi cận cảnh mức thu phóng. 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 Chế độ xem lớp phủ WebGL, tính năng nghiêng có lập trình và điều khiển hướng tiêu đề, điều khiển máy ảnh nâng cao và thu phóng phân đoạn giúp mượt mà hơn thu phóng.

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 camera tài sản 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ả thuộc tính máy ảnh cần cập nhật. Ví dụ sau đây cho thấy lệnh gọi map.moveCamera() để đặt center, zoom, heading và tilt cùng 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 phân số thay vì số nguyên. Mặc dù cả bản đồ đường quét và bản đồ vectơ đều hỗ trợ dữ liệu phân số thu phóng, thu phóng phân 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 đồ raster. Sử dụng tuỳ chọn bản đồ isFractionalZoomEnabled để biến dạng phân số phóng to và tắt.

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 thu phóng phân số bằng cách đặt Tùy chọn bản đồ isFractionalZoomEnabled như được minh họa 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 tính năng thu phóng phân số có đang bật hay không; đây là hữu ích nhất nếu bạn chưa đặt isFractionalZoomEnabled thành true một cách rõ ràng hoặc false. Mã ví dụ sau đây sẽ kiểm tra xem liệu tính năng thu phóng phân số được bật:

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