javascript - 高德地图宽度自适应？

Question

侧边栏点击按钮隐藏之后，高德地图宽度不会自适应，导致左边留白

请问下，在监听侧边栏隐藏之后，高德地图能直接重绘宽度吗？

点击蓝色按钮后

Answer 1

多看文档 �� 参考手册-地图 JS API 2.0 | 高德地图API

菜单收起 AMap 的容器宽度变更后，执行一下 resize 这个API就好了。

Answer 2

resize()

Answer 3

高德地图的 JavaScript API 提供了重绘地图的功能，这通常在地图容器大小改变或者需要更新地图显示时使用。在你的场景中，当侧边栏隐藏后，地图的容器宽度会发生变化，所以需要重绘地图以适应新的宽度。

你可以监听侧边栏的隐藏事件，并在事件触发后调用高德地图的 resize 方法来重绘地图。

下面是一个简单的示例代码，展示了如何在侧边栏隐藏后重绘高德地图：

// 假设你的地图实例是 mapvar map = new AMap.Map('container', {  // 地图的初始化选项});// 监听侧边栏的隐藏事件document.getElementById('sidebar-toggle-button').addEventListener('click', function() {  // 检查侧边栏是否隐藏  if (document.getElementById('sidebar').style.display === 'none') {    // 侧边栏隐藏，重绘地图    map.resize();  }});

在这个示例中，'sidebar-toggle-button' 是侧边栏切换按钮的 ID，'#sidebar' 是侧边栏的 ID，'#container' 是地图容器的 ID。你需要将这些值替换为你实际页面中的对应元素 ID。

当用户点击侧边栏切换按钮时，代码会检查侧边栏是否隐藏。如果隐藏了，就调用 map.resize() 方法来重绘地图，使其宽度自适应容器大小。

请注意，你可能需要根据你的页面结构和 CSS 样式调整这段代码。此外，确保你的高德地图 JavaScript API 已经正确加载并初始化。