2

我正在使用 jQuery UI 地图库（https://code.google.com/p/jquery-ui-map/）在我的 html5 移动网站上显示地图，但是无论如何我只会得到一个灰色方块我尝试什么。

我的代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <title>test</title> 
  <link rel="stylesheet" href="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.css">
  <script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script>
  <script src="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
  <script type="text/javascript" src="https://local url/js/jquery-ui.js"></script>
  <script type="text/javascript" src="https://local url/js/jquery.ui.map.full.min.js"></script>
  <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>
</head>
<body>
<div data-role="page" id="main">

  <div data-role="content">
    <p>
      TEST SITE
    </p>
    <p>
        <canvas id="map_canvas" style="width:50%;height:50%"></canvas>    
    </p>
  </div>

</div>

<script>
$(document).ready(function()
{
    $('#map_canvas').gmap();
    $('#map_canvas').gmap({ 'center': '42.345573,-71.098326' });               
    $('#map_canvas').gmap({ 'zoom': 8 });
            $('#map_canvas').gmap('refresh');
});
</script>
</body>
</html>

我得到的结果是这样的：

http://upload.mattie-systems.nl/uploads/28217-knipsel.png

任何帮助将不胜感激！

4

1 回答 1

5

解决方案

地图不能显示在画布元素上，它必须是这样的 DIV：

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

也不要使用百分比来表示地图高度，以太使用 px、em 或使用我的示例中的 css 来填充工作页面。

工作HTML：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.css"/>
        <style>
            #map_canvas {
                position: absolute;
                top: 0;
                bottom: 0;
                left:0;
                right:0;
            }
        </style>        
        <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script>              
        <script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script>
        <script src="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
        <script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/min/jquery.ui.map.full.min.js"></script>
        <script type="text/javascript" src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/jquery.ui.map.extensions.js"></script>
        <script>
            $(document).on('pageshow', '#main', function() {  
                $('#map_canvas').gmap();
                $('#map_canvas').gmap({ 'center': '42.345573,-71.098326' });               
                $('#map_canvas').gmap({ 'zoom': 8 });
                $('#map_canvas').gmap('refresh');
            });
        </script>  
    </head>
    <body>
        <div data-role="page" id="main">          
            <div data-role="content">
                <p>
                    TEST SITE
                </p>
                <p>
                    <div id="map_canvas"></div>
                </p>
            </div>
        </div>
    </body>
</html>

如果您想找到更多关于这个主题+示例的信息，请查看这篇文章。

于 2013-06-04T10:50:10.090 回答