无法使用画布显示我的谷歌地图

Question

我很难找到以下解决方案：

我正在编写JavaScript网页并尝试在html正文中显示带有canvas标记的Google地图（Google API）。

到目前为止，它只显示地图和画布。

Answer 1

您已将其设置为使元素自然流动。这意味着画布自然地落在地图下方。如果您希望将<canvas>元素放置在包含地图的<div>之上，那么您需要使用CSS来执行此操作。有各种各样的方法，但考虑到你使用的尺寸，它会在你的CSS中看起来像这样：

canvas {
  position: absolute:
  width: 100vw;
  height: 400px;
  top: 0;
  left: 0;
}

您可以更进一步，如果您想要精确，可以在代码中的canvas元素上设置width和height属性：

let canvas = document.querySelector('canvas');
canvas.height = '400';
canvas.width = innerWidth();