javascript - 缩放/缩放 Div 后在 Google Maps API v3 上使用绘图管理器？

Question

我一直在尝试使用 google maps API V3 的绘图管理器(绘制矩形)。使用 -webkit-transform 缩放谷歌地图 Canvas (包含 div)后像这样

 var transform = ['scale(' + 0.5 + ')'];
 $("#map_canvas").css('-webkit-transform', transform.join(' '));

我开始绘制矩形的点似乎在 map 上发生了偏移。我所说的移位是指绘制矩形的预期位置以某种方式被偏移量移位。最终结果是矩形出现在其他地方。我知道矩形的这种位移是由于 div 的缩放。有人可以帮我解决这个问题并让绘图管理器在缩放后工作吗？如果您有更多问题，请告诉我。在此先感谢您的帮助。

Answer 1

首先，您可以通过提供动态高度和宽度(百分比)来避免完全缩放。

因此，如果您想在 80% 的可视区域中显示 map div，您可以通过以下方式实现 -

<div id="MAP_DIV" style="height:80%;width:80%;"></div>

这避免了缩放问题，从而避免了“位移偏移”问题。

但我强烈建议您将内联样式移动到单独的 .css 文件中，以实现可重用性和代码维护。

希望对您有所帮助。