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

Bạn nên điều khiển độ xoay của máy ảnh, độ 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 hạn chế đối với máy ảnh.

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ể giới hạn ranh giới địa lý của máy ảnh bằng cách đặt tuỳ chọn bounds.

Mã mẫu sau đây minh hoạ việc hạn chế ranh giới trong 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ế máy ảnh

Bạn có thể hạn chế chuyển động của máy ảnh bằng cách đặt bất kỳ tuỳ chọn nào sau đây:

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

Mã mẫu sau đây minh hoạ việc 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 đối với bản đồ và máy ảnh

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

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();