jQuery Mobile - Как внедрить Карты Google на страницах с внешними ссылками - PullRequest
Новая
       7

jQuery Mobile - Как внедрить Карты Google на страницах с внешними ссылками

3 голосов
/ 02 февраля 2011

Я пытаюсь использовать Google Maps API 3 с jQuery Mobile и не могу загрузить свои внешние страницы для загрузки карты.Я проверил в Firebug, и кажется, что карта создается, но скрыта на странице.Я могу получить домашнюю страницу для успешной загрузки карты и внешние страницы для успешной загрузки карты, используя атрибут rel = "external" в ссылке.Но для внешних страниц, не использующих rel = "external", карта не отображается.

Вот мой код:

index.html 

<!DOCTYPE html>
<html>
<head>
    <title>Index</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
    <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
</head>

<body>
    <div data-role="page">

    <div data-role="header">
        <h1>jQuery Mobile</h1>
    </div>

    <div data-role="content">
    <ul data-role='listview' id='menu'>
        <li><a href="pages/map.html">external map page (does not work)</a></li>
        <li><a href="pages/map.html" rel="external">map page with rel=external (works)</a></li>
    </ul>
    </div>

</div>   
</body>
</html>

map.html 

<!DOCTYPE html>
<html>
<head>
    <title>Map</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
    <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>

    <style type="text/css"> 

    html { height: 100% } 
    body { height: 100%; margin: 0px; padding: 0px } 
    #map_canvas { height: 330px; width: 100%; margin: 0px; padding: 0px }

    </style>

</head>
<body>

<div data-role="page">

    <div data-role="header">
        <h1>jQuery Mobile</h1>
    </div>

    <div data-role="content">

    <h2>Map</h2>

    <div id="map_canvas"></div>

    <script type="text/javascript">
        function initialize() {
            var latlng = new google.maps.LatLng(40.716948, -74.003563);
            //console.log(latlng);
            var options = { zoom: 14, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
            var map = new google.maps.Map(document.getElementById("map_canvas"), options);

        }
        $(function () {

            initialize();
        });

    </script> 

    </div>
</div>   
</body>
</html>

Как заставить карту Google отображаться на внешней странице без использования rel = "external"?

1 Ответ

12 голосов
/ 03 февраля 2011

Я нашел решение.Мне нужно было инициализировать карту Google в событии jQuery Mobile "pagecreate", а не в $ (document) .ready.У меня также была проблема с тем, что полная карта не отображалась должным образом каждый раз, когда отображалась страница, поэтому я решил эту проблему, вызвав google.maps.event.trigger (map, 'resize'), чтобы обновить карту в событии jQuery Mobile "showhow".1001 *

Вот мой код:

index.html 

<!DOCTYPE html>
<html>
<head>
    <title>Index</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
    <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
    <style type="text/css"> 
        .gmap { height: 330px; width: 100%; margin: 0px; padding: 0px }
    </style>
</head>

<body>
    <div data-role="page">

    <div data-role="header">
        <h1>jQuery Mobile</h1>
    </div>

    <div data-role="content">
    <ul data-role='listview' id='menu'>
        <li><a href="pages/map1.html">external map page 1</a></li>
        <li><a href="pages/map2.html">external map page 2</a></li>
    </ul>
    </div>

</div>


</body>
</html>

map1.html 

<div data-role="page" class="page-map1">

    <div data-role="header">
        <h1>jQuery Mobile</h1>
    </div>

    <div data-role="content">

    <h2>Map</h2>

    <div id="map1" class="gmap"></div>

    <script type="text/javascript">
        var map1, latlng1, options1;
        function initialize() {

            latlng1 = new google.maps.LatLng(40.716948, -74.003563);
            options1 = { zoom: 14, center: latlng1, mapTypeId: google.maps.MapTypeId.ROADMAP };
            map1 = new google.maps.Map(document.getElementById("map1"), options1);

        }
        $('.page-map1').live("pagecreate", function() {

            initialize();

        });

        $('.page-map1').live('pageshow',function(){

            //console.log("test");
            google.maps.event.trigger(map1, 'resize');
            map1.setOptions(options1); 

        });

    </script> 

    </div>
</div>

map2.html 

<div data-role="page" class="page-map2">

    <div data-role="header">
        <h1>jQuery Mobile</h1>
    </div>

    <div data-role="content">

    <h2>Map</h2>

    <div id="map2" class="gmap"></div>

    <script type="text/javascript">
        var map2, latlng2, options2;
        function initialize() {

            latlng2 = new google.maps.LatLng(40.716948, -74.003563);
            options2 = { zoom: 14, center: latlng2, mapTypeId: google.maps.MapTypeId.ROADMAP };
            map2 = new google.maps.Map(document.getElementById("map2"), options2);

        }
        $('.page-map2').live("pagecreate", function() {

            initialize();

        });

        $('.page-map2').live('pageshow',function(){

            google.maps.event.trigger(map2, 'resize');
            map2.setOptions(options2); 
        });

    </script> 

    </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...