Bản đồ Vector

API JavaScript của Maps cung cấp hai cách triển khai 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 gồm các ô hình ảnh đường quét dựa trên pixel do máy chủ Nền tảng Google Maps tạo ra, 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 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.

Bản đồ vectơ này cũng là bản đồ của 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 đồ xếp kề 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 với Chế độ xem lớp phủ WebGL, tính năng kiểm soát hướng và nghiêng có lập trình, điều khiển máy ảnh nâng cao và thu phóng phân số để thu phóng mượt mà hơn.

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

Điều khiển camera

Sử dụng hàm map.moveCamera() để cập nhật đồng thời mọi tổ hợp thuộc tính máy ảnh. map.moveCamera() chấp nhận một tham số duy nhất chứa tất cả thuộc tính của 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ợ tính năng thu phóng phân số, 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ợ mức thu phóng phân số, nhưng tính năng thu phóng phân số được bật theo mặc định đối với bản đồ vectơ và ở trạng thái tắt đối với bản đồ đường quét theo mặc định. Sử dụng tuỳ chọn bản đồ isFractionalZoomEnabled để bật và tắt tính năng thu phóng phân số.

Ví dụ sau đây 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 tính năng thu phóng phân số đã bật hay chưa; điều này hữu ích nhất nếu bạn chưa thiết lập isFractionalZoomEnabled thành true hoặc false một cách rõ ràng. 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');
  }
});