使用 iOS / Phonegap 放大 Google 地图的 CSS答案

【问题标题】：CSS Zoom in Google Maps with iOS / Phonegap使用 iOS / Phonegap 放大 Google 地图的 CSS
【发布时间】：2012-03-01 00:01:16
【问题描述】：

我有一个包含谷歌地图的 iPad 应用程序。在该地图上，我可以使用 Google Map API V3 绘制线条和放置标记。全部使用 jQuery Mobile 和 PhoneGap 完成。

我遇到的问题是，我需要比 Google 提供的更高的地图缩放比例。我通过将 CSS 比例设置为 Google Map div 来做到这一点。 Zoom 正在工作。

问题是：

如果我在缩放的地图上放置标记，它们不在我点击的地方。它们出现在地图上的其他地方，因为 Div Zoom 正在改变坐标。如果我在 iPad 上缩放应用程序，它就可以工作。但是我只想缩放地图而不是整个应用程序。

感谢任何帮助或想法。

【问题讨论】：

链接到您的代码和 CSS 会很有价值。
缩放时调用的函数是这样的： // Karte mit CSS grösser Zoomen function FSuperZoom(wert) { ZoomWert = wert/10; $("#map_canvas > div > div:first-child").css("-moz-transform","scale("+ZoomWert+","+ZoomWert+")"); $("#map_canvas > div > div:first-child").css("-webkit-transform","scale("+ZoomWert+","+ZoomWert+")"); $("#map_canvas > div > div:first-child").css("-o-transform","scale("+ZoomWert+","+ZoomWert+")"); $("#map_canvas > div > div:first-child").css("transform","scale("+ZoomWert+","+ZoomWert+")");

【解决方案1】：

使用<meta name="viewport"> 标签来控制缩放。

不要使用 CSS 缩放。对 Maps API 中的 Map 对象使用 setZoom 方法。

【讨论】：

谢谢，但我需要比 setZoom 更高的缩放。
对不起，我看错了。由于您使用的是 iPad，您是否考虑过更改 <meta name="viewport"> 标签？
是的，我这样做了，然后我可以缩放整个应用程序并且它正在工作。但我不想全部缩放，我只想缩放地图。如果我在地图上捏手指，它会缩放，但在从地图上松开手指后，它会回到谷歌的最大缩放。

【解决方案2】：

我会通过使用zoom CSS 属性（iOS WebKit 应该支持）而不是 CSS 转换来改变您的方法。所以你的FSuperZoom 函数变成了

function FSuperZoom(wert) {
  ZoomWert = wert/10;
  $("#map_canvas > div > div:first-child").css("zoom",ZoomWert);
}

【讨论】：