Отображение карты Google в JQuery Mobile

Я пытаюсь создать приложение JQuery Mobile. Я хочу, чтобы это приложение включало в него карту Google. Я основывал свою реализацию на плагине jquery-ui-map. У них есть пример кода, доступный по адресу http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html#basic_map.Отображение карты Google в JQuery Mobile

Даже в этом примере я все еще не могу получить карту. Я чувствую, что использую самый простой код. Может кто-нибудь, пожалуйста, скажите мне, что я делаю неправильно? Мой код показан ниже:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
    <title></title> 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript" src="/resources/scripts/jquery.ui.map.full.min.js" /> 
</head> 

<body> 
    <div id="result" data-role="page"> 
     <div data-role="header"><h1>My App</h1></div> 

     <div data-role="content"> 
      <div id="resultMap" style="height:200px; width:200px; background-color:Lime;"> 
      </div> 
     </div> 
    </div> 

    <br /><br /> 

    <script type="text/javascript"> 
     $("#result").live("pageshow", function() { 
      $("#resultMap").gmap(); 
     }); 
    </script> 
</body> 
</html>

источник

2012-02-05 JQuery Mobile

карта() вместо GMAP()? –

:(К сожалению, нет. –

Хорошо. Я делаю это так:

var home = new google.maps.LatLng(x, y); 

$('#directions_map').live("pageshow", function() { 
    $('#map_canvas_1').gmap('refresh'); 
    }); 

$('#directions_map').live("pagecreate", function() { 
    $('#map_canvas_1').gmap({'center': home, 'zoom':17 }); 
    $('#map_canvas_1').gmap('addMarker', { 'position': home, 'animation' : google.maps.Animation.DROP }); 
    });

Поэтому, пожалуйста, попробуйте:
- создать GMap на pagecreate
- только обновить на pageshow
- маркер бонус ;-)

пусть я знаю, если это трюк. Это из моего рабочего примера, так что все должно быть хорошо. Я думаю, что важно настроить gmap перед показом страниц. Если вы думаете о JQM как о стадии ..., то было бы прямо перед поднятием занавеса. Возможно, слишком поздно для Google Magic. Pagecreate кажется лучше ...

источник

2012-02-06 07:57:58 frequent

Не повезло. Есть ли ограничение, которое вы не можете запустить под локальным хостом? Это так странно. У вас есть полный .html-файл, доступный где-то? Я просто не могу поверить, что это не так. Кстати, спасибо за вашу помощь. –

возможно, локальный, но я не эксперт. проверьте мою страницу, с которой я скопировал выше: http://www.franckreich.de/5/about .html - я снова удалю ссылку позже. – frequent

Спасибо, я часто загружал ваш код и запускал его с localhost. Интересно, что это сработало! Я собираюсь продолжать копать и пытаться определить, почему мой код не работает Я благодарю вас за помощь. Я отправлю еще один комментарий здесь. однажды (если) я выясню, почему мой другой код не работает. –

Вы пробовали это:

jquery-mobile with google maps

Я нашел, что это довольно легко реализовать.

источник

2012-02-05 20:32:47 frequent

Да, я видел это. Вот на что моя ссылка указывает. Тем не менее, мой код не работает. Я не могу понять, чего не хватает. Я пробовал, повторил с нуля без везения Образец, который они показывают, работает в моем браузере. –

Я также не смог получить базовый пример с пользовательских карт jQuery для работы с первой попытки. После того, как я привел пример в папке «demos» каталога jquery-ui-map-3.0-rc, я использовал все ненужные html и javascript для отображения очень простой карты. К сожалению, на сайте есть фрагменты кода, а не полный рабочий, но минималистический пример.

Вам нужно будет проверить правильность ссылок на ссылки и скрипты.

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>Example with Google maps and jQuery - Google maps jQuery plugin</title> 
     <link type="text/css" rel="stylesheet" href="css/style.css" > 
    </head> 
    <body> 
     <div id="map_canvas" class="map rounded"></div>  
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
     <script type="text/javascript" src="js/jquery-1.7.1/jquery.min.js"></script> 
     <script type="text/javascript" src="../ui/jquery.ui.map.js"></script> 
     <script type="text/javascript"> 
        $('#map_canvas').gmap({'center': '57.7973333,12.0502107', 'zoom': 10, 'disableDefaultUI':true, 'callback': function() { 
         var self = this; 
         self.addMarker({'position': this.get('map').getCenter() }).click(function() { 
          self.openInfoWindow({ 'content': 'Hello World!' }, this); 
         }); 
        }}); 
     </script> 
    </body> 
</html>

источник

2012-08-21 07:08:56 erin

ответ

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