Điều khiển bản đồ và máy ảnh

Chọn nền tảng: Android iOS JavaScript

Bạn có thể muốn kiểm soát chế độ xoay camera, độ cao tối đa hoặc tạo ranh giới vĩ độ và kinh độ để hạn chế chuyển động của người dùng trong một bản đồ nhất định. Bạn có thể thực hiện việc này bằng cách sử dụng các chế độ hạn chế đối với camera.

Ví dụ sau đây cho thấy một bản đồ có ranh giới vị trí được đặt để giới hạn chuyển động của camera:

Hạn chế ranh giới trên bản đồ

Bạn có thể hạn chế ranh giới địa lý của camera bằng cách đặt lựa chọn bounds.

Mẫu mã sau đây minh hoạ cách hạn chế ranh giới của bản đồ:

async function init() {
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: { lat: 37.7704, lng: -122.3985, altitude: 500 },
    tilt: 67.5,
    mode: MapMode.HYBRID,
    bounds: {south: 37, west: -123, north: 38, east: -121}
  });

init();
}

Hạn chế camera

Bạn có thể hạn chế chuyển động của camera bằng cách đặt một trong các lựa chọn sau:

• maxAltitude
• minAltitude
• maxHeading
• minHeading
• maxTilt
• minTilt

Mẫu mã sau đây minh hoạ cách hạn chế camera:

async function init() {
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: { lat: 37.7704, lng: -122.3985, altitude: 500 },
    tilt: 67.5,
    mode: MapMode.HYBRID,
    minAltitude: 1,
    maxAltitude: 1000,
    minTilt: 35,
    maxTilt: 55
  });

 document.body.append(map);
}

init();

Hạn chế ranh giới trên bản đồ và camera

Bạn có thể đồng thời hạn chế cả ranh giới bản đồ và camera. Đoạn mã mẫu sau đây minh hoạ cách hạn chế cả ranh giới bản đồ và camera:

async function init() {
  const { Map3DElement, MapMode } = await google.maps.importLibrary("maps3d");

  const map = new Map3DElement({
    center: { lat: 37.7704, lng: -122.3985, altitude: 500 },
    tilt: 67.5,
    mode: MapMode.HYBRID,
    minAltitude: 1,
    maxAltitude: 1000,
    minTilt: 35,
    maxTilt: 55,
    bounds: {south: 37, west: -123, north: 38, east: -121}
  });

 document.body.append(map);
}

init();

Đường dẫn camera đặt sẵn

Bản đồ 3D trong Maps JavaScript cung cấp 2 đường dẫn camera đặt sẵn. Bạn có thể tuỳ chỉnh đường dẫn camera bằng cách thay đổi thời lượng của ảnh động (do đó tăng hoặc giảm tốc độ) hoặc bằng cách kết hợp các đường dẫn để tạo trải nghiệm điện ảnh hơn.

Bản đồ 3D trong Maps JavaScript hỗ trợ các đường dẫn camera sau:

• Ảnh động flyCameraTo bay từ tâm bản đồ đến một đích đến cụ thể.
• Ảnh động flyCameraAround xoay quanh một điểm trên bản đồ với số vòng quay được chỉ định.

Bạn có thể kết hợp hai đường dẫn có sẵn để bay đến một điểm tham quan, xoay quanh điểm đó rồi dừng lại khi được chỉ định.

Chuyển đến

Mã mẫu sau đây minh hoạ cách tạo hiệu ứng cho camera bay đến một vị trí:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: {
      center: { lat: 37.6191, lng: -122.3816 },
      tilt: 67.5,
      range: 1000
    },
    durationMillis: 5000
  });
}

Bay xung quanh

Mã mẫu sau đây minh hoạ cách tạo hiệu ứng cho camera bay xung quanh một vị trí:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraAround({
    camera,
    durationMillis: 60000,
    repeatCount: 1
  });
}

Kết hợp ảnh động

Đoạn mã mẫu sau đây minh hoạ cách kết hợp các ảnh động để di chuyển camera đến một vị trí, sau đó xoay quanh vị trí đó khi ảnh động đầu tiên kết thúc:

const map = document.querySelector('gmp-map-3d');

async function init() {
  await google.maps.importLibrary('maps3d');

  map.flyCameraTo({
    endCamera: flyToCamera,
    durationMillis: 5000,
  });

  map.addEventListener('gmp-animationend', () => {
    map.flyCameraAround({
      camera: flyToCamera,
      durationMillis: 60000,
      repeatCount: 1
    });
  }, {once: true});
}

Xử lý cử chỉ điều khiển

Khi người dùng cuộn một trang có chứa bản đồ, thao tác cuộn có thể vô tình khiến bản đồ thu phóng. Bạn có thể kiểm soát hành vi này bằng cách đặt lựa chọn gestureHandling trên bản đồ.

gestureHandling: cooperative

Tính năng xử lý cử chỉ "hợp tác" cho phép người dùng cuộn trang mà không ảnh hưởng đến thao tác thu phóng hoặc di chuyển bản đồ. Để phóng to, người dùng có thể sử dụng các nút điều khiển, cử chỉ hai ngón tay (đối với thiết bị có màn hình cảm ứng) hoặc bằng cách giữ phím CMD/CTRL trong khi di chuyển.

Đoạn mã sau đây minh hoạ cách đặt chế độ xử lý cử chỉ thành "hợp tác":

new Map3DElement({
  center: { lat: 37.729901343702736, lng: -119.63788444355905, altitude: 1500 },
  tilt: 70,
  heading: 50,
  range: 4000,
  gestureHandling: 'COOPERATIVE',
});

gestureHandling: greedy

Tính năng xử lý cử chỉ "tham lam" phản ứng với mọi sự kiện cuộn và cử chỉ chạm.

gestureHandling: auto

Chế độ xử lý cử chỉ "Tự động" sẽ thay đổi hành vi của bản đồ tuỳ thuộc vào việc bản đồ có nằm trong <iframe> hay không và liệu trang có thể cuộn hay không.

• Nếu bản đồ nằm trong một <iframe>, thì hoạt động xử lý cử chỉ sẽ là "hợp tác".
• Nếu bản đồ không nằm trong <iframe>, thì hoạt động xử lý cử chỉ sẽ là "tham lam".