Bản đồ Vector

Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

API Maps JavaScript cung cấp hai cách triển khai bản đồ khác nhau: đườ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ủa 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, 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 thiết bị của người dùng để hiển thị 2D và đồ họa.

Bản đồ vectơ giống với bản đồ Google mà người dùng của bạn đã quen thuộc 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 vectơ và việc bổ sung 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 thành phần hiển thị lớp phủ WebGL, chế độ điều khiển nghiê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ố giúp 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 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ả thuộc tính máy ảnh cần cập nhật. Ví dụ sau cho thấy cách gọi map.moveCamera() để đặt center, zoom, headingtilt 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() bằng 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ách sử dụ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ợ thu phóng phân số, nhưng thu phóng phân số được bật theo mặc định cho bản đồ vectơ và tắt theo mặc định cho 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 phân số.

Ví dụ sau đây cho thấy việc 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 tùy chọn bản đồ isFractionalZoomEnabled như minh họa bên dưới:

// 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 phân số đã bật hay chưa; cách này hữu ích nhất 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');
  }
});