Question

我正在尝试使用gmap3 JQuery插件在我的html文件上设置基本地图，但总是当我刷新我的页面时什么也没有。这是我的代码：http://pastie.org/8062410 它在这个链接上说如何设置，通常它只是一个JQuery行：http://gmap3.net/en/catalog/9-map/map-32

有人可以帮我查一下我的代码会发生什么吗？谢谢你的帮助！

我回到这个主题，因为JQM + Google Map API V3存在其他问题。我想创建一个全屏谷歌地图，其中包含一个包含我的徽标的简单标题和一个用于打开右侧JQM面板的小按钮。这是我的代码，它显示了一个JQM标题+打开的面板按钮（它正常工作！）：</ p>

<!DOCTYPE html>
<html>
 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TEST</title>
    <link rel="stylesheet" href="themes/default-theme.min.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3. /jquery.mobile.structure-1.3.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"> </script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?k&sensor=false"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
    <script type="text/javascript" src="./gmap3v5.1.1/gmap3.min.js"></script>
    <script src="./js/load-map.js"></script>
 </head>
<body>
<div data-role="page" id="interface">
    <div data-role="header">
        <div id=logo>
            <img src="../../images/logo.png" width="56" height="25">
        </div>
        <a href="#openPanel">Panel</a>
    </div>
    <div data-role="content">
        <div id="openPanel" data-role="panel" data-position="right" data-display="overlay">
            <ul data-role="listview" data-theme="e">
            <li><a href="#">A</a></li>
            <li><a href="#">B</a></li>
            <li><a href="#">C</a></li>
            <li><a href="#">D</a></li>
            </ul>
        </div>
      <script>
        $("#map-page").gmap3();
      </script>
    </div>
</div>

但谷歌地图永远不会全屏出现，有时会隐藏我的标题。有人可以告诉我我的DOM有什么问题吗？谢谢你的帮助！

Answer 1

缺少测试div。以下代码工作正常。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Gmap3 test</title>

        <script src="jquery-1.7.2.min.js" type="text/javascript"></script>


        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
        <script type="text/javascript" src="gmap3.min.js"></script>
    </head>
    <body>
        <div data-role="page" data-theme="a">

            <div id="test" style="width:500px;height:500px;">

            </div>

            <div data-role="content">
                <script>
                    $("#test").gmap3({
                        map:{
                            address:"POURRIERES, FRANCE",
                            options:{
                                zoom:4,
                                mapTypeId: google.maps.MapTypeId.SATELLITE,
                                mapTypeControl: true,
                                mapTypeControlOptions: {
                                    style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
                                },
                                navigationControl: true,
                                scrollwheel: true,
                                streetViewControl: true
                            }
                        }
                    });
                </script>
            </div>
        </div>
    </body>
</html>

Gmap基本地图显示

1 个答案: