0

我正在构建一个包含 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>

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

示例代码：

<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>

4

1 回答 1

0

我正在使用您提到的插件（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');
});

您应该尝试在没有插件的情况下以某种方式执行此操作。

于 2012-05-15T21:37:23.960 回答