使用JQuery Mobile和JQuery -ui-map的谷歌地图

Google maps with JQuery Mobile and jquery-ui-map

本文关键字：JQuery 谷歌地图 -ui-map Mobile 使用      更新时间：2023-09-26

我正在使用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

任何帮助将非常感激!

解决方案

Map不能显示在canvas元素上，它必须是这样的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>

如果你想找到更多关于这个主题的例子，那么看看这个文章

相关文章：