Google Maps Javascript API 中的可缩放画布作为叠加层

Question

我有一张图像 (9600x7200)，用作启用 Google 地图的网页上的叠加层。我用 latlng 锚定 SW 和 NW 角，当我缩放地图时，图像可以正确缩放。现在我想创建第二个叠加层，它是一个 HTML5 画布元素，大小也为 9600x7200，位于图像顶部。我可以这样做，但是当我在画布上绘制时，缩放/定位都是错误的。我使用https://developers.google.com/maps/documentation/javascript/examples/overlay-simple 作为两个覆盖的模板，它将覆盖元素设置为父 div 的 100%，这是锚定到地图的内容。这适用于<img>，但不适用于 HTML5 画布，它不像图像那样具有固有大小。 （您可以在 CSS 中设置宽度/高度，但底层图像具有实际尺寸，然后缩放到 CSS 尺寸）。

所以，我的问题是：如何创建一个 9600x7200 大小的可绘制画布，并将其锚定到我的地图上，使其定位和缩放以匹配其下方的 <img> 叠加层？有没有这方面的代码示例？

Answer 1

不要使用 CSS 来调整画布的大小，通过画布元素的宽度和高度属性来设置它。如果您在画布上绘图（为简单起见，假设它被拉伸到正常大小的两倍），它的大小和位置也会被拉伸。因此，如果您尝试在 x: 10, y: 10 处更改像素的颜色，您将在 x: 20, y: 20 处得到一个 2x2（大约）的正方形。