控制攝影機位置

在 Maps JavaScript API 的 3D 地圖中，您可以使用 cameraPosition 選項管理攝影機的焦點。

主要行為：

  • 使用 center：經緯度座標會指定攝影機面向的地圖確切位置。
  • 使用 cameraPosition：攝影機本身會放置在建構期間提供的座標。因此很難將檢視畫面置中於特定關注點。

以下範例示範如何使用 center 選項初始化地圖，確保特定焦點。標記表示 center 中提供的中心點：

CSS

gmp-map-3d {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
style.css

HTML

<html>
    <head>
        <title>3D Camera Position</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
    </head>
    <body>
        <gmp-map-3d
            center="40.7860524,-73.9634983,0"
            range="1500"
            tilt="70"
            heading="-150"
            mode="satellite">
            <gmp-marker position="40.7860524,-73.9634983" altitude-mode="clamp-to-ground"></gmp-marker>
        </gmp-map-3d>

        <script
            async
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&v=beta&libraries=maps3d"></script>
    </body>
</html>
index.html

試用範例

視野和範圍

您可以使用兩個不同的參數 (範圍和視野)，調整視埠中顯示的地圖範圍。兩者都會影響「縮放」程度，但運作方式不同：

  • range：控制攝影機與中心點之間的實際距離。調整這項設定等同於將攝影機移近或移遠地圖。

  • fov (視野)：控制攝影機鏡頭的角度。值越大，效果就越像廣角鏡頭，可顯示更多周邊畫面；值越小，效果就越像望遠鏡頭。

以下比較結果顯示同一張地圖在 fov 光譜兩端的差異。左側地圖的視野角度設為 5 (窄角/望遠)，右側地圖則設為 80 (廣角)。

並排比較金門大橋的兩張 3D 空中彩現圖。左側顯示整個橋樑跨距和馬林岬的廣角鳥瞰圖。右側是紅色懸索塔的極度特寫，以及從陡峭向下角度拍攝的橋面。