Question

我有一个非常奇怪的问题，我会尽力解释。

我有一个单页骨干应用程序，它通过AJAX加载新页面。

其中一个页面（联系我们页面）是一张全屏Google地图，其中一个联系表单位于顶部。

我遇到的问题是，当从特定页面导航时，我遇到了地图加载位置的问题。

以下是有效且无效的网页：

Home         -> Contact Us = Map loads in correct location
Finding True -> Contact Us = Map loads aprox 5km north of correct location
Work         -> Contact Us = Map loads in correct location
People       -> Contact Us = Map loads aprox 2km north of correct location
Social       -> Contact Us = Map loads in correct location

我无法解决为什么Finding True和People页面导致地图加载错误的原因。每次都运行相同的代码。

以下是Contact Us的视图：

app.ContactUsView = Backbone.View.extend({
    el: '#contact_us',
    events: {
        'submit #contact_form': 'submitForm'
    },
    initialize: function() {
        this.$el = $(this.el);
        this.$form = $('#contact_form');

        this.setMetaData('Contact Us | ' + app.site_name, null, null);
        this.setCurrentPageHeight(this.$el);
        app.script_gmaps = (app.script_gmaps ? this.setUpMap() : $.getScript('https://maps.googleapis.com/maps/api/js?sensor=false&key=AIzaSyDU64cYJcx0W2jFuv0Jh439Vgrqta0OKTg&callback=app.contact_us_view.setUpMap', function(){}));

        app.script_jquery_validate = (app.script_jquery_validate ? this.setClientSideValidation() : $.getScript('js/vendor/jquery.validate.min.js', function(){
            app.contact_us_view.setClientSideValidation();
        }));
    },
    setClientSideValidation: function () {
        this.$form.validate();
    },
    submitForm: function(event) {
        event.preventDefault();

        this.$form.find('.return').html('Sending your message...');

        $.ajax({
            dataType: "json",
            type: "POST",
            url: 'send.php',
            data: this.$form.serialize(),
            success: function(data){

                if (data.status == 'error') {

                    app.contact_us_view.showErrorMessage(data);

                } else {

                    app.contact_us_view.messageSent(data);

                }
            }
        });
    },
    showErrorMessage: function (data) {
        this.$form.find('.return').html(data.message).parent().addClass('error');
    },
    messageSent: function (data) {
        this.$form.find('input[type!=submit], textarea').val('');
        this.$form.find('.return').html(data.message).parent().removeClass('error');
    },
    setUpMap: function() {
        if($('#map_canvas').length === 0) return false;

        var mapLatLong = new google.maps.LatLng(51.5174456, -0.1305081);
        var markerLatlng = new google.maps.LatLng(51.5170951, -0.1367416);

        var mapOptions = {
            zoom: 16,
            center: mapLatLong,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }

        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

        var contentString = '<div id="content">'+
                                '<div id="siteNotice">'+
                                '</div>'+
                                '<h1 id="firstHeading" class="firstHeading">BrocklebankPenn</h1>'+
                                '<div id="bodyContent">'+
                                    '<p>5th floor, 58-60 Berners Street,<br />London,<br />W1T 3NQ,<br />United Kingdom</p>'+
                                    '<p>+44 (0)20 3137 7034</p>'+
                                '</div>'+
                            '</div>';

        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        var marker = new google.maps.Marker({
            position: markerLatlng,
            map: map,
            title: 'BrocklebankPenn'
        });

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map,marker);
        });

        infowindow.open(map,marker);

        return true;
    },
    removeView: function() {
        this.$el.parent().remove();
        this.remove();
    }
});

以下是Finding True的代码：

app.FindingTrueView = Backbone.View.extend({
    el: '#finding_true',
    initialize: function(){
        this.$el = $(this.el);
        this.setMetaData('Finding True | ' + app.site_name, null, null);
        $(window).scroll(this.showOverlay);
        this.showOverlay();
    },
    showOverlay: function() {
        var height = $(window).scrollTop() + $(window).height();

        var reveal_offset = $('.section.reveal').offset().top + ($('.section.reveal').height() * 0.7);
        var simplify_offset = $('.section.simplify').offset().top + ($('.section.simplify').height() * 0.7);
        var amplify_offset = $('.section.amplify').offset().top + ($('.section.amplify').height() * 0.7);
        var threesteps_offset = $('.three-steps').offset().top + ($('.three-steps').height() * 2.5);

        if (height >= threesteps_offset) {
            $('.three-steps .fadein').addClass('active');
        }

        if (height >= reveal_offset) {
            $('.section.reveal').addClass('show_overlay');
        }

        if (height >= simplify_offset) {
            $('.section.simplify').addClass('show_overlay');
        }

        if (height >= amplify_offset) {
            $('.section.amplify').addClass('show_overlay');
        }

        if($(window).scrollTop() > (0.25 * $('#current_page article').height())) {
            $('.page-header .scroll-to-content').addClass('inactive');
        } else {
            $('.page-header .scroll-to-content').removeClass('inactive');
        }
    },
    removeView: function() {
        $(window).unbind('scroll');
        this.$el.parent().remove();
        this.remove();
    }
});

以下是People的视图：

app.PeopleView = Backbone.View.extend({
    el: '#people',
    initialize: function(){
        if(!app.script_linkedIn) {
            app.script_linkedIn = $.getScript('//platform.linkedin.com/in.js');
        }
    },
    removeView: function() {
        this.$el.parent().remove();
        this.remove();
    }
});

如果有人能提供帮助那就太棒了！

谢谢，路加。

更新

所以我逐步完成代码并确保google.maps对象每次都具有相同的Long和Lat。

不幸的是，Long和Lat每次都是一样的，所以我真的无法理解为什么这个装载在不同的位置。

Answer 1

所以我终于找到了这个问题的底部。

问题与我在新页面中加载的方式有关。我通过AJAX获取页面，将其插入屏幕外元素然后像旋转木马一样滑入。

我没有注意到，屏幕外元素的高度不正确，高度设置为当前活动页面的高度。然后，这会导致地图以不正确的大小设置地图中心的长和纬度。

当滑动屏幕页面时，高度会更改为浏览器的100％，但地图未更改为反映这意味着长度和纬线未正确显示。

我现在设置关闭屏幕页面的高度，然后加载AJAX内容，这解决了我的问题。

谷歌地图从AJAX调用加载到不同的Lat Long

1 个答案: