jQuery Mobile和Google地图不可见 [英] jQuery Mobile and Google map not visible

问题描述

好吧，所以当谈到jQuery mobile时，我是一个noobie，但是我已经湿透了。

Alright, so I'm a noobie when it comes to jQuery mobile, but I'm getting my feet wet.

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

The gist is a two page mobile site. Page one is a simple form where users select a couple of options. When the form is submitted, they get redirected to page two, which contains the "map canvas". But for some reason, the next page is just blank. Sometimes when I hit the back button I can see the map but briefly. I'm stumped!

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

I'm using jQuery 1.6.4 and jQuery Mobile 1.0rc1.

这里是我的一些代码：

Page One 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);
    }
});

推荐答案

看起来我的问题是双重的，

It looks like my problem was two fold,

问题在于我必须为map-canvas div指定宽度和高度

One was the problems was that I had to specify a width and height for the map-canvas div

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

另外，我必须设置地图以在页面的pageshow事件上创建地图是的。

Also, I had to set the map to create on the "pageshow" event for the page the map was in.

这篇关于jQuery Mobile和Google地图不可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！