1

我在google map using Javascript API v 3使用jQuery Mobilein时遇到了一些问题Chrome。最初在first page地图上加载正常，然后单击地图上的一个标记，它会将我带到next page. browswer back如果我使用或programatically created back按钮返回该页面，地图仍然可以正常加载。但问题是当first page我使用refresh button I created. refresh当我单击标记转到 时单击此按钮后next page，现在从那里返回时，地图未正确渲染。整个地图只是呈现在左上角的一个小版本中。这个问题只是存在，Chrome而Firefox它工作正常。

这是我绘制地图的代码：

<script>
$(document).on("pageinit", "#map-page", function(){
....
....
function drawMap(currentLatLng, otherLocations) {
    var myMapOptions = {
        center: currentLatLng, // center the map to the current geolocation
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"), myMapOptions);

    // Add a current lat/lng geolocation overlay to the map center
    var markerCurrentLocation = new MarkerWithLabel({
        position: currentLatLng,
        map: map,
        title: "Current Location!",
        labelContent: "Current Location!",
        labelAnchor: new google.maps.Point(22, 0),
        labelClass: "labels",
        labelStyle: {opacity: 0.60}
    });

    var iconImage = 'images/bus.png';
    // Add overlays to other locations
    $.each(otherLocations, function(index, value){
        var markerOtherLocations = new MarkerWithLabel({
        position: new google.maps.LatLng(value.latitude, value.longitude),
        map: map,
        title: value.name+" "+value.distance,
        icon: iconImage,
        labelContent: value.name+" "+value.distance,
        labelAnchor: new google.maps.Point(50, 0),
        labelClass: "labels", // the CSS class for the label
        labelStyle: {opacity: 0.60}
        });

        google.maps.event.addListener(markerOtherLocations, 'click', function() {
        $.mobile.changePage("#detail-page", { transition: "flip"} ); 
        });
   });

   map.fitBounds(latlngbounds);
}
...
...
});


//The refresh function outside of $(document).on("pageinit")
function refreshPage() {
            $.mobile.changePage(
                window.location.href,
                {
                    allowSamePageTransition : true,
                    transition              : 'none',
                    showLoadMsg             : false,
                    reloadPage              : true
                }
            );
}
</script>

我的 jQuery Mobilemultipage模板如下所示：

渲染地图的第一页

The mentioned refresh button is on the header

<div data-role="page" id="map-page" data-url="map-page">

        <div data-role="header">
            <a href="#" data-role="button" data-icon="bars" data-iconpos="notext">Choose Station</a>
            <h1>NextBus Application</h1>
            <a href="javascript:refreshPage();" data-role="button" data-icon="refresh" data-iconpos="notext">Refresh</a><!-- The problem arises after clicking this refresh -->
        </div><!-- /header -->

        <div data-role="content" id="map-canvas"> <!--Div for map display.-->
            <!--<p>Page content goes here.</p>-->
        </div><!-- /content -->

        <div data-role="footer" data-id="myfooter" class="ui-bar" data-position="fixed">
            <h4>Copyright 2013 Suyesh Amatya</h4>
        </div><!-- /footer -->

</div><!-- /page -->

单击第一页上的标记后我登陆的下一页

The mentioned back button is on the header of this page

<div data-role="page" id="detail-page">
        <div data-role="header">
            <a href="#map-page" data-icon="home" data-iconpos="notext" data-rel="back">Back</a>
            <h1>Timings for station: </h1>

        </div>
        <div data-role="content" >  
            <a href="javascript:someFun();" data-role="button">Generate </a>
            <center>
                <div id="add_exercise"></div>
            </center>
            <input id="add_result" />
            <a href="javascript:someFun1();" data-role="button">Check</a>
        </div>
        <div data-role="footer">
            <h1>@Copyright</h1>
        </div>
    </div>
4

0 回答 0