Question

我正在尝试重新创建JQuery Google地图演示页面，页面正在渲染地图框，但地图本身并未显示。

<script type="text/javascript">
var mobileDemo = { 'center': '57.7973333,12.0502107', 'zoom': 10 };

$('#basic_map').live('pageinit', function() {
    demo.add('basic_map', function() {
        $('#map_canvas').gmap({'center': mobileDemo.center, 'zoom': mobileDemo.zoom, 'disableDefaultUI':true, 'callback': function() {
            var self = this;
            self.addMarker({'position': this.get('map').getCenter() }).click(function() {
                self.openInfoWindow({ 'content': 'Hello World!' }, this);
            });
        }}); 
    }).load('basic_map');
});

$('#basic_map').live('pageshow', function() {
    demo.add('basic_map', function() { $('#map_canvas').gmap('refresh'); }).load('basic_map');
});

这是index.html页面下面的div

<div id="basic_map" data-role="page">
<div data-role="header">
    <h1><a data-ajax="false" href="/">maps page</a> examples</h1>
    <a data-rel="back">Back</a>
</div>
<div data-role="content">   
    <div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
        <div id="map_canvas" style="height:350px;"></div>
    </div>
</div>

如果有帮助，这里是我的index.html的负责人

    <meta name="viewport" content="width=device-width, initial-scale=1">    
<title>FTF</title> 
<link href="css/jquery.mobile-1.0rc1.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.6.4.min.js"></script>
<script src="js/config.js"></script>
<script src="js/jquery.mobile-1.0rc1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/phonegap.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=(removed)&sensor=false">

感谢。

Answer 1

<meta name="viewport" content="width=device-width, initial-scale=1">  
<title>FTF</title>
<link href="css/jquery.mobile-1.0rc1.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.6.4.min.js"></script>
<script src="js/config.js"></script>
<script src="js/jquery.mobile-1.0rc1.min.js"></script>
<scripttype="text/javascript" charset="utf-8" src="js/phonegap.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=(removed)&sensor=false">

您还没有包含以下三个文件：

<script type="text/javascript" src="../ui/jquery.ui.map.js"></script>
<script type="text/javascript" src="../ui/jquery.ui.map.services.js"></script>
<script type="text/javascript" src="../ui/jquery.ui.map.extensions.js"></script>

JQuery谷歌地图插件不渲染基本地图

1 个答案: