分类导航

jQuery 发布时间：2022-03-30 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了jQuery Mobile – 如何在外部链接页面上实现Google Maps，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

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

@H_241_5@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地图显示在外部网页上？

解决方法

我找到了解决方案.我需要在“pagecreate”jQuery Mobile事件中初始化Google地图,而不是在$(document).ready上.我也遇到了问题,因为每次页面显示时都没有正确呈现完整的地图所以我通过调用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>

@H_241_5@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>

@H_241_5@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>