Đ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ã mẫu 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();