jQuery-ui-map無法與jQuery Mobile一起使用

Question

我只是在這里http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html#basic_map上查看了jquery-ui-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加上一些高度時，它會顯示靜態地圖圖像。

Answer 1

現在就可以正常工作了，源代碼很好。 有一個問題，因為jQuery Mobile Map響應Touch事件 。

Chrome觸摸事件默認情況下未啟用，因此只需在Chrome控制台中打開“觸摸”事件即可。

jQuery-ui-map無法與jQuery Mobile一起使用

問題描述

1 個解決方案

解決方案1
0 已采納 2012-10-17 09:35:19

jQuery-ui-map無法與jQuery Mobile一起使用

問題描述

1 個解決方案

解決方案1 0 已采納 2012-10-17 09:35:19

解決方案1
0 已采納 2012-10-17 09:35:19