0

我只是在这里查看 jquery-ui-map 的演示http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html#basic_map

这正是我想要实现的，它非常基本，我只是按照他们在示例中所做的那样，但它似乎不起作用，我在Chrome 桌面浏览器上对其进行了测试。

这是来源：

<!DOCTYPE html >
<html >
<head>
    <title>Map Search Page</title>
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.0.1.min.css" />
    <link rel="stylesheet" type="text/css" href="css/jquery.mobile.structure-1.0.1.min.css" />    
    <style type="text/css">
        html { height: 100% }
            body { height: 100%; margin: 0px; padding: 0px }
            #map { height: 100%; width:100%; }
    </style>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.ui.map.full.min.js"></script>       
    <script type="text/javascript" src="js/jquery.ui.map.services.min.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.0.1.min.js"></script>            
    <script type="text/javascript" src="js/script.js"></script>
    <script type="text/javascript">

        var mobileDemo = { 'center': '57.7973333,12.0502107', 'zoom': 10 };
        $('#home').live("pageinit", function () {

            $('#map').gmap({ 'center': mobileDemo.center, 'zoom': 17 });
            //$('#map').gmap('addMarker', { 'position': mobileDemo.center, 'animation': google.maps.Animation.DROP });
        });

        $('#home').live('pageshow', function () {
            $('#map').gmap('refresh');
        });
    </script>
</head>
<body>
    <section id="home" data-role="page">
        <header data-role="header">
            <h1>Multi Color Rating</h1>
        </header>
        <div class="content"  style="width:100%; height:100%; " data-role="content">
          <div id="map">

          </div>
        </div>
        <footer data-role="footer">
       <h2>     All Rights Reserved &copy; 2012</h2>
        </footer>
    </section>

    <script type="text/javascript" src="js/script.js"></script>
</body>
</html>

现在只显示页眉和页脚。

有一件重要的事情，当我给地图 div 一些高度时，它会显示静态地图图像。

4

1 回答 1

0

现在刚刚开始工作，源代码很好。出现问题是因为jQuery Mobile Map 响应了 Touch 事件。

Chrome 中的触摸事件默认不启用，因此只需在 Chrome 控制台中打开触摸事件即可。

于 2012-10-17T09:35:19.700 回答