-1

I have a problem where my Google Maps is only showing top tiles (much like this issue PhoneGap + JQuery Mobile + Google Maps v3: map shows Top Left tiles?) but in iOS and with jQuery UI Map. However this only occurs after I play around with the app for some time switching tabs (it works fine on a Desktop Browser, only fails on the Device App)

I've tried several solutions from other posts (as you can see from the code) but my problem is a bit different, as it doesn't happen at first

Here is my HTML

<div data-role="page" id="page3" data-url="page3" tabindex="0" style="padding-bottom:19px">
....
    <div data-role="content" id="ct">
        <div id="map_canvas" style="height:100%"></div>
    </div>
....
</div>

And JS

$(document).bind('pagechange', function () {
if ($.mobile.activePage.attr('id') === 'page3') {

    if (!mapInited) {
        mapInited = true;
        $('#map_canvas').gmap().bind('init', function () {

            var bounds = new google.maps.LatLngBounds();
            navigator.geolocation.getCurrentPosition(locSuccess, locError);
            $.each(markers, function (i, marker) {
                var latlong = new google.maps.LatLng(marker.latitude, marker.longitude);
                bounds.extend(latlong);
                $('#map_canvas').gmap('addMarker', {
                    'position': latlong,
                    'bounds': true,
                    'primaryColor': "#0000FF",
                    'icon': './img/train.png'
                }).click(function () {
                    $('#map_canvas').gmap('openInfoWindow', {
                        'content': marker.content
                    }, this);
                });

            });
            $('#map_canvas').css('height', getRealContentHeight());
            $('#map_canvas').css('width', '100%');
            google.maps.event.trigger($('#map_canvas'), "resize");
            setTimeout(function () {
                google.maps.event.trigger($('#map_canvas'), 'resize');
            }, 500);
        });
    }
  }
 });
}

Thanks in advance for any thoughts

"Fixed" the issue with a very ugly work around Basically I recreate the Map everytime the page is loaded, like this

if (!mapInited)  mapInited = true;
else { $('#map_canvas').remove(); $('#ct').append('<div id="map_canvas" style="height:100%"></div>'); }
4

2 回答 2

0

您触发 jQuery 对象的调整大小事件，这不会产生任何影响，因为您必须触发google.maps.Map-instance 的事件：

google.maps.event.trigger($('#map_canvas').gmap('get','map'),'resize');

您也可以使用插件方法triggerEvent来触发事件：

 $('#map_canvas').gmap().triggerEvent('resize');
于 2013-06-19T03:00:55.130 回答
0

如果您使用的是 jquery-ui-map，为什么要使用本机 google maps api 而不是 gmap 函数？

为什么不调用$('#map_canvas').gmap('refresh');

于 2014-09-03T07:09:18.993 回答