您可能需要控制攝影機的平移、最大高度，或是建立經緯度界線，限制使用者在特定地圖中的移動範圍。您可以使用相機限制執行這項操作。
以下範例顯示的地圖已設定位置界線，可限制攝影機的移動範圍：
限制地圖範圍
您可以設定 bounds 選項，限制攝影機的地理邊界。
下列程式碼範例說明如何限制地圖邊界：
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();
}
限制攝影機
你可以設定下列任一選項，限制攝影機的移動範圍：
maxAltitudeminAltitudemaxHeadingminHeadingmaxTiltminTilt
下列程式碼範例示範如何限制攝影機：
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();
限制地圖和攝影機範圍
您可以同時限制地圖和攝影機的邊界。下列程式碼範例示範如何限制地圖和攝影機的邊界：
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();
預設攝影機路徑
Maps JavaScript 中的 3D 地圖提供兩種預設攝影機路徑。您可以變更動畫的持續時間 (藉此加快或減慢速度)，或是結合多個攝影機路徑，打造更具電影感的體驗，自訂攝影機路徑。
Maps JavaScript 中的 3D 地圖支援下列攝影機路徑：
flyCameraTo動畫會從地圖中心飛往指定目的地。flyCameraAround動畫會繞著地圖上的某個點旋轉，旋轉次數為指定次數。
你可以結合這兩種路徑，先飛往感興趣的點，然後繞著該點旋轉，最後在指定位置停止。
目的地
下列程式碼範例說明如何將攝影機動畫設為飛往某個位置：
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
});
}
飛越
下列程式碼範例示範如何將攝影機動畫設為在某個位置附近飛行：
const map = document.querySelector('gmp-map-3d');
async function init() {
await google.maps.importLibrary('maps3d');
map.flyCameraAround({
camera,
durationMillis: 60000,
repeatCount: 1
});
}
合併動畫
下列程式碼範例會示範如何合併動畫，將攝影機飛往某個位置，然後在第一個動畫結束時繞著該位置旋轉：
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});
}
控制手勢處理
使用者捲動含有地圖的頁面時，可能會不小心縮放地圖。您可以設定 gestureHandling 地圖選項來控管這項行為。
gestureHandling：cooperative
「合作」手勢處理方式可讓使用者捲動頁面，不會影響地圖的縮放或平移。如要縮放，使用者可以透過控制項、雙指手勢 (適用於觸控螢幕裝置)，或按住 CMD/CTRL 並捲動畫面。
以下程式碼示範如何將手勢處理方式設為「合作式」：
new Map3DElement({
center: { lat: 37.729901343702736, lng: -119.63788444355905, altitude: 1500 },
tilt: 70,
heading: 50,
range: 4000,
gestureHandling: 'COOPERATIVE',
});
gestureHandling：greedy
「貪婪」手勢處理方式會對所有捲動事件和觸控手勢做出反應。
gestureHandling：auto
「自動」手勢處理會根據地圖是否包含在 <iframe> 中，以及網頁是否可捲動，變更地圖的行為。
- 如果地圖位於
<iframe>內，手勢處理方式會是「協同」。 - 如果地圖不在
<iframe>內，手勢處理方式會是「貪婪」。