可扩展的画布作为Google Maps Javascript API中的覆盖

Scalable canvas as overlay in Google Maps Javascript API

本文关键字：API 覆盖 Javascript Maps 布作 Google 可扩展的更新时间：2023-09-26

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

所以，我的问题是：我如何创建一个9600x7200的可绘制画布，并将其锚定在我的地图上，使其位置和比例与下面的<img>覆盖相匹配？有这方面的代码示例吗？

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