jQuery Mobile 和 Google 地图不可见答案

【问题标题】：jQuery Mobile and Google map not visiblejQuery Mobile 和 Google 地图不可见
【发布时间】：2011-10-19 04:48:41
【问题描述】：

好的，所以我对 jQuery 移动版是个菜鸟，但我的脚都湿了。

要点是一个两页的移动网站。第一页是一个简单的表单，用户可以在其中选择几个选项。提交表单后，它们会被重定向到包含“地图画布”的第二页。但是由于某种原因，下一页只是空白。有时当我点击后退按钮时，我可以看到地图，但很短暂。我被难住了！

我正在使用 jQuery 1.6.4 和 jQuery Mobile 1.0rc1。

这是我的一些代码：

第一页 HTML：

<div data-role="page" id="one">
    <div data-role="content">
        <div data-role="fieldcontain">
            <form action="" id="mobile-findpath" method="post">
                <label for="mobile-start" class="select">Start:</label>
                <select name="start" id="mobile-start">
                    <option data-placeholder="true" value="">Current Position</option>
                    {% for node in nodes %}
                    <option value="{{ node.lat }},{{ node.lng }}">{{ node.label }}</option>
                    {% endfor %}
                </select>
                <label for="mobile-end" class="select">Dest:</label>
                <select name="end" id="mobile-end">
                    {% for node in nodes %}
                    <option value="{{ node.label }}">{{ node.label }}</option>
                    {% endfor %}
                </select>
                <a href="/m-map/" data-role="button" data-icon="gear">Show Route</a>
                <!--<a href="#two" data-role="button" data-icon="gear">Show Route</a>-->
            </form>
        </div>
    </div>
</div>

第二页（地图）HTML：

<div data-role="page" data-title="Map" data-theme="b" class="page-map" style="width:100%; height:100%;">
    <div data-role="header"><h1>Map</h1></div>
    <div data-role="content" style="width:100%; height:100%; padding:0;">
        <div id="map_canvas" style="width:100%; height:100%;"></div>
    </div>
</div>

相关JS：

$(".page-map").live("pagecreate", function() {
    wMobile = WayFinderMobile();
    if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position){
            wMobile.initialize(position.coords.latitude, position.coords.longitude, true);
        });
    } else {
        wMobile.initialize(38.94617, -92.32866);
    }
});

【问题讨论】：

标签： javascript jquery google-maps-api-3 jquery-mobile

【解决方案1】：

看来我的问题有两个方面，

问题之一是我必须为地图画布 div 指定宽度和高度

<div data-role="content" style="padding:0px;margin:0;">
        <div id="map_canvas" style="width:100%;height:350px;"></div>
</div>

另外，我必须设置地图以在地图所在页面的“pageshow”事件中创建。

【讨论】：

【解决方案2】：

不确定 WayFinderMobile 是什么，但您是否尝试过 http://code.google.com/p/jquery-ui-map/ 的 jquery-ui-map 插件

那里也有很多很好的例子。

【讨论】：