jQuery Mobile - 如何在外部链接页面上实现 Google 地图

发布于 2024-10-15 21:03:49 字数 2827 浏览 4 评论 0原文

我尝试将 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>

如何在不使用 rel="external" 的情况下让 Google 地图显示在外部页面上?

I am attempting to use Google Maps API 3 with jQuery Mobile and cannot get my external pages to load a map. I checked in Firebug and it appears that the map is being created but is hidden on the page. I can get the home page to load a map successfully and I can get external pages to load the map successfully using rel="external" attribute on the link. But for external pages not using rel="external" the map doesn't show up.

Here is my code:

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>

How can I get a Google Map to show up on an external page without using rel="external"?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

迷鸟归林 2024-10-22 21:03:49

我找到了解决方案。我需要在“pagecreate”jQuery Mobile 事件中而不是在 $(document).ready 上初始化 Google 地图。我还遇到了每次页面显示时完整地图都无法正确渲染的问题,因此我通过调用 google.maps.event.trigger(map, 'resize') 来刷新“pageshow”jQuery Mobile 事件上的地图来解决该问题。

这是我的代码:

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> 

I found the solution. I needed to initialize the Google map in the "pagecreate" jQuery Mobile event instead of on $(document).ready. I also had a problem with the full map not rendering properly everytime the page showed so I solved that by calling google.maps.event.trigger(map, 'resize') to refresh the map on the "pageshow" jQuery Mobile event.

Here is my code:

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> 
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文