10

我只是想在 jquery 移动页面中显示谷歌地图。如果我直接加载页面，它可以工作。但是，如果我从另一个页面导航到该页面，它只会呈现一个地图图块。乍一看，我的问题似乎类似于https://forum.jquery.com/topic/google-maps-inside-jquery-mobile

但是，我已经在“pageinit”事件中执行了初始化，并且我的地图 div 具有设置的宽度和高度。

我看过http://code.google.com/p/jquery-ui-map/但如果可能的话，我宁愿不使用（另一个）第三方插件。

这是我的页面的样子：

<!DOCTYPE HTML>
<html>
<head>
    <title>PhoneGap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="cordova-1.6.1.js"></script>
    <link rel="stylesheet" href="jquery.mobile-1.1.0.min.css" />
    <script src="jquery-1.7.1.min.js"></script>
    <script src="global.js"></script>
    <script src="jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
    <div id="mapPage" data-role="page">
        <style type="text/css">
            html
            {
                height: 100%;
            }
            body
            {
                height: 100%;
                margin: 0;
                padding: 0;
            }
            #map_canvas
            {
                height: 100%;
            }
        </style>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=***API_KEY_REMOVED***&sensor=true">
        </script>
        <script type="text/javascript">
            function initialize() {
                var height = $(window).height() - 50;
                var width = $(window).width();

                $("#map_canvas").height(height);
                $("#map_canvas").width(width);
                var myLatlng = new google.maps.LatLng(39.962799, -82.999802);
                var myOptions = {
                    center: myLatlng,
                    zoom: 18,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
                //alert($(map.getDiv()).width());   
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: ""
                });
                google.maps.event.trigger(map, 'resize')
            }

            $("#mapPage").live('pageinit', function () {

                initialize();
            });

        </script>
        <div data-role="header" id="menuHeader">
            <a href="MenuDialog.htm" class="menuLink" data-role="none" data-rel="dialog">
                <img class="headerIcon" style="height: 40px; border-right: 1px solid #333333; padding-right: 5px;"
                    id="MenuIcon" src="images/menuIcon.png" /></a>
            <p>
                Loc
            </p>
        </div>
        <div data-role="content">
            <div id="map_canvas" style="margin-top: 50px;">
            </div>
        </div>
</body>
<html>

提前感谢您的帮助。

更新：

经过一些试验后，我在我的调整大小事件中添加了以下延迟：

setTimeout(function() {

            google.maps.event.trigger(map,'resize');
        }, 500);

这似乎解决了这个问题。希望这对其他人有帮助。

4

5 回答 5

13

我在一个网站上读到，如果你有这个问题，那是因为当你初始化你的谷歌地图时，dom 没有完全加载。你必须在你的代码中添加这个：

$( document ).bind( "pageshow", function( event, data ){
google.maps.event.trigger(map, 'resize');
});

这个对我有用。在您显示的每个页面上调整大小可能很残酷，但是......它有效。

于 2012-07-03T09:58:33.887 回答
4

您有<html>100 <body>% 的大小，但没有和<div>之间的层次结构中的 s 。<body><div id="map_canvas">

尝试将这些添加到您的 CSS 中（content需要一个id.

您可能还需要通过在一切准备就绪时<div>触发事件来确保 API 知道地图的大小。resize仅显示单个图块是 API 出错的典型症状（通常假设它的大小为零）。

于 2012-05-07T21:32:27.910 回答
4

我没有触发调整大小，而是通过将我的 js 包装在“pagecreate”事件中来解决这个问题......就像这样：

$(document).on('pagecreate', '#map', function() {
    var mapOptions = {
        center: new google.maps.LatLng(40.773782,-73.974236),
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };  

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

});
于 2013-08-13T08:55:47.160 回答
0

我认为正确的方法是在部分图块加载一次时触发事件。下面的代码片段将帮助您实现这一目标。

google.maps.event.addListenerOnce(map, 'tilesloaded', function(){
    google.maps.event.trigger(map,'resize');
});
于 2014-04-08T12:26:21.273 回答
0

我发现问题在于 JQuery mobile 使用 Ajax 加载页面。我不确定这是否是最佳做法，但我只是通过将以下代码放入锚标记中来强制它正常加载我的地​​图页面：

data-ajax="false"
于 2014-06-16T16:18:52.593 回答