jQuery Mobile и карта Google не отображаются - PullRequest
Новая
       20

jQuery Mobile и карта Google не отображаются

0 голосов
/ 19 октября 2011

Хорошо, так что я новичок, когда дело доходит до мобильного 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);
    }
});

Ответы [ 2 ]

3 голосов
/ 20 октября 2011

Похоже, моя проблема была двукратной,

Одна из проблем заключалась в том, что мне пришлось указать ширину и высоту для div карты-холста 

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

Также япришлось настроить карту для создания в событии "pageshow" для страницы, на которой была карта.

0 голосов
/ 19 октября 2011

Не уверен, что такое WayFinderMobile, но вы пробовали плагин jquery-ui-map на http://code.google.com/p/jquery-ui-map/

Там также есть много хороших примеров.

...