控制地图和相机
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
您可能希望控制镜头的平移、最大海拔高度,或创建纬度和经度边界来限制用户在给定地图上的移动。为此,您可以使用摄像头限制。
下例所示的地图将位置边界设置为限制镜头的移动:
限制地图边界
您可以通过设置 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();
}
限制相机
您可以通过设置以下任一选项来限制镜头的移动:
maxAltitude
minAltitude
maxHeading
minHeading
maxTilt
minTilt
以下代码示例演示了如何限制相机:
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();
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2025-04-29。
[null,null,["最后更新时间 (UTC):2025-04-29。"],[],[],null,["Select platform: [Android](/maps/documentation/maps-3d/android-sdk/map-camera-restrictions \"View this page for the Android platform docs.\") [iOS](/maps/documentation/maps-3d/ios-sdk/map-camera-restrictions \"View this page for the iOS platform docs.\") [JavaScript](/maps/documentation/javascript/3d/interaction \"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\nIt may be desirable for you to control the camera's pan, maximum altitude, or to\ncreate latitude and longitude boundaries restricting a user's movement in a\ngiven map. You can do this using *camera restrictions*.\n\nThe following example shows a map with location boundaries set to limit the\ncamera's movement:\n\n\nRestrict map bounds\n\nYou can restrict the geographical boundaries of the camera by setting the\n`bounds` option.\n\nThe following code sample demonstrates restricting the map bounds: \n\n async function init() {\n const { Map3DElement, MapMode } = await google.maps.importLibrary(\"maps3d\");\n\n const map = new Map3DElement({\n center: { lat: 37.7704, lng: -122.3985, altitude: 500 },\n tilt: 67.5,\n mode: MapMode.HYBRID,bounds: {south: 37, west: -123, north: 38, east: -121}\n });\n\n init();\n }\n\nRestrict the camera\n\nYou can restrict the movement of the camera by setting any of the following\noptions:\n\n- `maxAltitude`\n- `minAltitude`\n- `maxHeading`\n- `minHeading`\n- `maxTilt`\n- `minTilt`\n\nThe following code sample demonstrates restricting the camera: \n\n async function init() {\n const { Map3DElement, MapMode } = await google.maps.importLibrary(\"maps3d\");\n\n const map = new Map3DElement({\n center: { lat: 37.7704, lng: -122.3985, altitude: 500 },\n tilt: 67.5,\n mode: MapMode.HYBRID,minAltitude: 1,\n maxAltitude: 1000,\n minTilt: 35,\n maxTilt: 55\n });\n\n document.body.append(map);\n }\n\n init();\n\nRestrict map and camera bounds\n\nYou can simultaneously restrict both map and camera bounds. The following code\nsample demonstrates restricting both map and camera boundaries: \n\n async function init() {\n const { Map3DElement, MapMode } = await google.maps.importLibrary(\"maps3d\");\n\n const map = new Map3DElement({\n center: { lat: 37.7704, lng: -122.3985, altitude: 500 },\n tilt: 67.5,\n mode: MapMode.HYBRID,minAltitude: 1,\n maxAltitude: 1000,\n minTilt: 35,\n maxTilt: 55,\n bounds: {south: 37, west: -123, north: 38, east: -121}\n });\n\n document.body.append(map);\n }\n\n init();"]]