vue3 高德地图 自适应窗口 高度

Vue3 是一个流行的 JavaScript 框架，用于构建用户界面。它提供了一种简洁优雅的方式来管理和渲染数据。高德地图是一个广泛使用的地图应用程序接口（API），它提供了许多地图功能和服务。

在 Vue3 中，要实现高德地图的自适应窗口高度，可以采取以下步骤：

1. 在 Vue3 的组件中引入高德地图的 JavaScript API。可以使用 `<script>` 标签将高德地图的 API 引入到组件中，或者使用 npm 安装并导入高德地图的包。

2. 在组件的模板中创建一个 `<div>` 元素作为地图容器，设置宽度和高度。可以使用 CSS 来设置容器的样式，如设置宽度为100%。

3. 在组件的 `mounted` 生命钩子函数中，使用 JavaScript 代码来初始化地图。可以使用高德地图的 API 提供的 `AMap.Map` 构造函数初始化地图，将其绑定到之前创建的地图容器上。

4. 在组件的 `mounted` 钩子函数中，监听窗口尺寸变化的事件。当窗口尺寸变化时，更新地图容器的高度。可以使用 `window` 对象的 `resize` 事件来监听窗口尺寸变化，然后使用 JavaScript 代码来更新地图容器的高度。

5. 在组件的 `beforeUnmount` 钩子函数中，销毁地图对象。可以使用高德地图的 API 提供的 `AMap.Map` 对象的 `destroy` 方法来销毁地图对象，释放资源。

通过以上步骤，就可以实现高德地图的自适应窗口高度。当窗口尺寸变化时，地图容器的高度也会随之变化，适应新的窗口尺寸。这样可以确保地图在不同屏幕尺寸和设备上正确显示，并提供更好的用户体验。