jQuery Mobile不要'在pageshow之后执行函数

时间:2013-07-22 13:50:13

标签: json google-maps jquery-mobile cordova

我在我的Phonegap应用程序中有这个JQM;我创建了一个Google地图,然后从json文件加载标记。

当我启动page2时,我看到第一个console.log(坐标)和最后一个console.log (2222222) - 包含numberOfElements的中间console.log仅在第一次显示时显示。如果我看到地图并且我返回,则不会加载整个脚本。

为什么?

$(document).on('pageshow', '#page2', function () {
    var latnow = Number(localStorage.getItem("lat"));
    var lngnow = Number(localStorage.getItem("lng"));
    var coordinate = new google.maps.LatLng(latnow, lngnow);
    console.log(latnow + ' ' + lngnow);
    $('#map_canvas').gmap({
        'center': coordinate,
            'disableDefaultUI': true,
            'zoom': 5,
            'scrollwheel': false,
            'panControl': false
    });
    $('#map_canvas').gmap().bind('init', function () {
        var images = "img/icon.png";
        var images2 = "img/icon2.png";

        $.getJSON('http://www.site.com/app/json.php?lat=' + latnow + '&lat=' + lngnow + '', function (data) {
            var myObject = data;
            var numberOfElements = data.markers.length;
            console.log(numberOfElements); // <- !!!!!!
            if (numberOfElements == 0) {
                alert("no result");
                $.mobile.changePage("#home");
            }
            var myObject = JSON.stringify(myObject);
            localStorage.setItem("json_near", myObject);
            $('#map_canvas').gmap('addMarker', {
                'position': coordinate,
                    'icon': images2,
                    'bounds': true
            });

            //marker da json
            $.each(data.markers, function (i, marker) {

                $('#map_canvas').gmap('addMarker', {
                    'position': new google.maps.LatLng(marker.latitude, marker.longitude),
                        'draggable': false,
                        'bounds': true,
                        'icon': images

                }).click(function () {
                    $('#map_canvas').gmap('openInfoWindow', {
                        'content': marker.content,
                            'maxWidt': 200,
                            'maxHeight': 400,
                            'autoScroll': true
                    }, this);
                });
            });
        });
    });

    map_element = document.getElementById("map_canvas");

    var mapwidth = $(window).width();
    var mapheight = $(window).height();
    $("#map_canvas").height(mapheight);
    $("#map_canvas").width(mapwidth);

    google.maps.event.trigger(map_element, 'resize');

    console.log("2222222");

});

1 个答案:

答案 0 :(得分:0)

我假设您正在使用此插件 - http://code.google.com/p/jquery-ui-map/,对吧?

我认为这不是jquery mobile的问题。从这些console.log消息中可以看到调用pageshow事件。 尝试将console.log("xxx")粘贴到gmap init处理程序中。我认为这是第二次没有调用的那个。

这样的东西
$('#map_canvas').gmap().bind('init', function () {
        console.log("xxxxxx");
        var images = "img/icon.png";
        var images2 = "img/icon2.png";
...
...
});

你每次进入页面时都会在控制台中看到xxxxxxx吗? 如果没有,尝试找到如何检查地图是否已经初始化(第二次,第三次,第四次等),然后直接调用getJSON的方法。