Question

我正在构建一个包含Google地图（API v3）的jQuery Mobile页面。到目前为止，我已成功显示地图并实现了许多功能。我的问题是谷歌地图上的缩放功能无法正常渲染（它看起来像是破碎了）。

页面底部的代码演示了jQuery Mobile中Google地图的基本实现。如果您在最新版本的Firefox上进行测试，您应该会看到缩放问题。请注意，如果您对缩放功能下面的三个库中的任何一个进行了评论，则可以正确渲染，但jQuery移动功能将丢失。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"/>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>

我所做的研究表明，在these示例中实现的库可能会解决问题，但它需要重新编写大量方法。任何人都可以通过更简单的方法来解决这个问题。

示例代码：

<head>
    <style type="text/css">
        #map_canvas {
            height: 375px;
            width: 550px;
            padding:10px;
            border:1px solid gray;
            margin:10px;
        }
    </style>
    <link rel="stylesheet" href="../_assets/css/jqm-docs.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="//maps.googleapis.com/maps/api/js?sensor=false&libraries=places"
    type="text/javascript"></script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css"/>
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script>
</head>

<body onload="initialize()">
    <script type="text/javascript">
        function initialize() {
            map = new google.maps.Map(document.getElementById('map_canvas'), {
                center: new google.maps.LatLng(37.332619, -121.88440100000003),
                zoom: 13,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });
        }
    </script>
    <div data-role="page">
        <div data-role="header"></div>
        <div data-role="content">
            <div id="map_canvas"></div>
        </div>
    </div>
</body>

Answer 1

我正在使用您提到的插件（http://jquery-ui-map.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html）并建议您将其与jQM一起使用。该插件还在jQM上遇到一些渲染失败，并建议刷新pageshow上的所有地图。

导致代码如下：

jQuery(document).bind('pageshow', function(e, data) {
    var page = jQuery(e.target);
    page.find('.gmap').gmap('refresh');
});

你应该尝试在没有插件的情况下以某种方式这样做。

谷歌地图在jQuery Mobile页面中，缩放功能无法正常渲染

1 个答案: