Google Maps infoWindow 未正确放置在 jQuery Mobile 应用程序中

Question

我在 jQuery Mobile 应用程序中嵌入了 Google 地图。在 iPhone 上查看地图并单击 infoWindows 时出现以下行为：

1. 如果单击需要地图向左平移的 infoWindow，则 infoWindow 的右侧会从屏幕右侧脱落。
2. 单击需要地图向右平移的信息窗口不会出现同样的问题。

所有 infoWindows 的大小都正确，但地图根本没有平移到正确的位置。我正在使用以下代码来放置地图：

<style type="text/css">
.page-map, .ui-content, #map_canvas { width: 100%; height: 100%; padding: 0; }
#map_canvas img{max-width:none};
.content-primary, #map_canvas { height: 100%; min-height: 100%; }
</style>

<div data-role="page" data-theme="b" id="mappage" class="page-map" style="width:100%; height:100%;">
    <div data-role="content" class="fullHeight">
        <div id="map_canvas"></div>
    </div>
</div>

我需要弄清楚如何在单击导致地图向左平移的标记时使 infoWindows 正确平移。

Answer 1

窗口的自动调整大小导致了该问题。我调整了我的 CSS 以强制信息窗口为 225 像素。一旦我强制信息窗口小于 iPhone 视口的开口，它就会按照我的预期正确放置信息窗口。