3D 地图控件和探索
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
控件概览
通过 Maps JavaScript API 中的仿真 3D 地图显示的地图包含界面元素,可支持用户与地图互动。这些元素称为“控件”,您可以选择是否将其纳入界面中。如果您禁止显示界面控件,用户仍可使用键盘快捷键在地图上四处移动。
Maps JavaScript API 中的仿真 3D 地图还支持使用预设的相机路径引导用户浏览地图。您可以自定义和组合这些路径,以打造丰富的 3D 体验。
探索控制
下图显示了 Maps JavaScript API 中拟真 3D 地图会默认显示的一组控件:

下面列出了 Maps JavaScript 中的仿真 3D 地图中的一整套控件:
- 缩放控件:可显示“+”和“-”按钮,用于更改地图的缩放级别。
- 借助倾斜度控制,您可以更改相机的倾斜度。
- 借助旋转控件,您可以更改相机的方向。
- 移动控件:可显示“←”“→”“↑”和“↓”按钮,用于更改地图的中心。
以下代码示例演示了如何切换探索控件:
JavaScript
const map = new Map3DElement({
center: { lat: 37.819852, lng: -122.478549, altitude: 2000 },
tilt: 75,
heading: 330,
mode: MapMode.SATELLITE,
defaultUIDisabled: true,
});
HTML
<gmp-map-3d
mode="hybrid"
range="639.274301042242"
tilt="64.92100184857551"
center="34.0768990953219,-118.47450491266041,292.9794737933403"
heading="-61.02026752077781"
default-ui-disabled
></gmp-map-3d>
预设的相机路径
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,
rounds: 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-animation-end', () => {
map.flyCameraAround({
camera: flyToCamera,
durationMillis: 60000,
rounds: 1
});
}, {once: true});
}
后续步骤
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2025-07-22。
[null,null,["最后更新时间 (UTC):2025-07-22。"],[],[],null,["Select platform: [Android](/maps/documentation/maps-3d/android-sdk/configure-camera-controls \"View this page for the Android platform docs.\") [iOS](/maps/documentation/maps-3d/ios-sdk/configure-camera-controls \"View this page for the iOS platform docs.\") [JavaScript](/maps/documentation/javascript/3d/map-controls \"View this page for the JavaScript platform docs.\")\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n| This product or feature is in Preview (pre-GA). Pre-GA products and features might have limited support, and changes to pre-GA products and features might not be compatible with other pre-GA versions. Pre-GA Offerings are covered by the [Google\n| Maps Platform Service Specific Terms](https://cloud.google.com/maps-platform/terms/maps-service-terms). For more information, see the [launch stage\n| descriptions](/maps/launch-stages).\n\n\u003cbr /\u003e\n\nControls Overview\n\nThe maps displayed through the Photorealistic 3D Maps in Maps JavaScript API contain UI elements to support\nuser interaction with the map. These elements are known as *controls* and you\ncan elect to include them in the UI, or not to. If you suppress the UI controls,\nthe user can still navigate around the map using keyboard shortcuts.\n\nThe Photorealistic 3D Maps in Maps JavaScript API also supports guiding your users around the map using\npreset camera paths. These paths can be customized and combined to create rich\n3D experiences.\n| **Tip:** To enforce restrictions on the latitude, longitude, and camera behavior, see [Control the map and camera](/maps/documentation/javascript/3d/interaction).\n\nExploration controls\n\nThe following image shows the default set of controls displayed by the\nPhotorealistic 3D Maps in Maps JavaScript API:\n\nBelow is a list of the full set of controls in the Photorealistic 3D Maps in Maps JavaScript:\n\n- The **Zoom control** displays \"+\" and \"-\" buttons for changing the zoom level of the map.\n- The **Tilt control** lets you change the camera's tilt.\n- The **Rotate control** lets you change the camera's heading.\n- The **Move control** displays \"←\", \"→\", \"↑\", and \"↓\" buttons for changing the center of the map.\n\nThe following code sample demonstrates toggling exploration controls: \n\nJavaScript \n\n const map = new Map3DElement({\n center: { lat: 37.819852, lng: -122.478549, altitude: 2000 },\n tilt: 75,\n heading: 330,\n mode: MapMode.SATELLITE,\n defaultUIDisabled: true,\n });\n\nHTML \n\n \u003cgmp-map-3d\n mode=\"hybrid\"\n range=\"639.274301042242\"\n tilt=\"64.92100184857551\"\n center=\"34.0768990953219,-118.47450491266041,292.9794737933403\"\n heading=\"-61.02026752077781\"\n default-ui-disabled\n \u003e\u003c/gmp-map-3d\u003e\n\nPreset camera paths\n\nPhotorealistic 3D Maps in Maps JavaScript provides two preset camera paths. The camera paths can be\ncustomized by changing the duration of the animation (thereby increasing or\ndecreasing speed), or by combining them to create more cinematic experiences.\n\nPhotorealistic 3D Maps in Maps JavaScript supports the following camera paths:\n\n- `flyCameraTo` animation flies from the map center to a specified destination.\n- `flyCameraAround` animation rotates around a point on the map the specified number of rounds.\n\nThe two available paths may be combined to fly to a point of interest, rotate\naround it, and then stop when specified.\n\nFly to\n\nThe following code sample demonstrates animating the camera to fly to a\nlocation: \n\n const map = document.querySelector('gmp-map-3d');\n\n async function init() {\n await google.maps.importLibrary('maps3d');\n\n map.flyCameraTo({\n endCamera: {\n center: { lat: 37.6191, lng: -122.3816 },\n tilt: 67.5,\n range: 1000\n },\n durationMillis: 5000\n });\n }\n\nFly around\n\nThe following code sample demonstrates animating the camera to fly around a\nlocation: \n\n const map = document.querySelector('gmp-map-3d');\n\n async function init() {\n await google.maps.importLibrary('maps3d');\n\n map.flyCameraAround({\n camera,\n durationMillis: 60000,\n rounds: 1\n });\n }\n\nCombine animations\n\nThe following code sample demonstrates combining animations to fly the camera to\na location, and then rotate around the location when the first animation ends: \n\n const map = document.querySelector('gmp-map-3d');\n\n async function init() {\n await google.maps.importLibrary('maps3d');\n\n map.flyCameraTo({\n endCamera: flyToCamera,\n durationMillis: 5000,\n });\n\n map.addEventListener('gmp-animation-end', () =\u003e {\n map.flyCameraAround({\n camera: flyToCamera,\n durationMillis: 60000,\n rounds: 1\n });\n }, {once: true});\n }\n\nNext steps\n\n- Learn how to [restrict the map and camera](/maps/documentation/javascript/3d/interaction).\n- Learn how to [listen for and handle user interaction](/maps/documentation/javascript/3d/map-events)."]]