-1

У меня проблема с jQuery Mobile и Google Maps. Мне нужно создать мобильное приложение с jQuery Mobile. Моя проблема в том, что я не могу отображать карту в контенте, я вижу, что только серое пространство и браузеры, такие как Safari и Chrome, не видят никаких ошибок или предупреждений. Консоль Firefox вместо этого видит множество предупреждений, таких как «неизвестное свойство» -moz-border-radius-topleft «Декларация выпадающих данных»., «Ошибка в анализируемом значении для фонового изображения. Декларация брошена «jQuery Mobile и Google Maps

Я загрузил код без jQueryMobile, как я сделал для нормальной веб-страницы, и она работала

EDIT:.. Что я могу видеть, и видеть, что консоль показывает, вы можете посмотреть здесь:

http://riccardocelli.altervista.org/temporaneo.php

Я попытался изменить версии JQuery и jQueryMobile, но он не работает ..

$(document).on("pagecreate", "#pagemap", function() { 
 
//here the google map is created and loaded 
 
... 
 
... 
 
Options = { 
 
      enableHighAccuracy: true, 
 
      timeout: 10000, 
 
      maximumAge: 0, 
 
      zoom:20 
 
     }; 
 

 
... 
 
      map = new google.maps.Map(document.getElementById("map_container"), Options); 
 
...

<div data-role="page" id="pagemap" data-title="home"> 
 

 
    <div data-role="header" data-position="fixed" data-tap-toggle="false"> 
 
    <div id="top"> 
 
     <a id="top1" href="index.php" data-role="button" data-icon="home" data-iconpos="notext">Home</a> 
 
     <a id="top2" href="#search" data-role="button" data-icon="search" data-iconpos="notext">Search</a> 
 
     </div> 
 
    </div> 
 

 
    <div role="main" class="ui-content" id="map_container"> 
 

 
    </div> 
 

 
    <div data-role="footer" data-position="fixed" data-tap-toggle="false"> 
 
     <div id="bottom"> 
 
      <a id="bottom1" href="#friends" data-role="button" data-icon="star" data-iconpos="notext">Home</a> 
 
      <a id="bottom2" href="Settings.php" data-role="button" data-icon="gear" data-iconpos="notext">Search</a> 
 
     </div> 
 
    </div> 
 
</div>

Кто-нибудь может мне помочь? Все ошибки содержатся в файле: http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css.

Спасибо!

источник

2016-09-01 Riccardo Celli

I пытался заменить «pagecreate» на «pageinit», «pageshow», но он не работает. Я видел много примеров и демонстраций, но ничто из этого не работало в моем mac. –

Добро пожаловать в Stackoverflow! У вас всегда есть возможность отредактировать вопрос, чем добавлять сведения в раздел комментариев. Кроме того, можете ли вы предоставить нам пример http://jsfiddle.net или http://jsbin.com, где он демонстрирует ошибку, с которой вы столкнулись? Btw, вы проверили, установив минимальную высоту на div 'map_container' – Ravimallya

Спасибо @Ravimallya за ваш ответ, но высота не изменит результат :( –

Попробуйте давая Google Map отправной точки:

var myOptions = { 
    enableHighAccuracy: true, 
    zoom: 6, 
    center: new google.maps.LatLng(36.231719,-113.030911), 
}; 
map = new google.maps.Map($('#map_container')[0], myOptions);

также добавить DIV в DIV контента jQM для отображения контейнера и установите его высоту.

DEMO

Если вы хотите карту, чтобы заполнить доступную высоту устройства между верхним и нижними колонтитулами, вы можете масштабировать DIV контента в соответствии с этим ответом: set content height 100% jquery mobile

DEMO2

источник

2016-09-01 10:37:52 ezanker

jQuery Mobile и Google Maps

ответ

DEMO

DEMO2

Смежные вопросы