使用Backbone.js进行首次查看后，Google Map无法正确呈现

user1716672 发表于 Dev

用户名

我用Phonegap，Backbone.js，Require.js和PageSlider（https://github.com/ccoenraets/PageSlider）创建了一个移动应用程序。

我想显示一个带有标记的简单Google Map。模板如下所示：

<div class='main-content' id='map-container'>

    <a href="geo:51.903679,-8.468274">
        <div id="map-canvas"></div>
    </a>

</div>

这是视图：

define(function (require) {

"use strict";

var $                   = require('jquery'),
    _                   = require('underscore'),
    Backbone            = require('backbone'),
    tpl                 = require('text!tpl/Map.html'),
    side_nav                = require('text!tpl/SideNav.html'),
    template = _.template(tpl),
    map, myLatlng, mapOptions, marker;


return Backbone.View.extend({

    initialize: function () {          
        this.render();      
    },

    initMap: function () {

         myLatlng = new google.maps.LatLng(51.903679, -8.468274);

         mapOptions = {
            center: myLatlng,
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

            map = new google.maps.Map(this.$el.find('#map-canvas')[0],
                                      mapOptions);


         marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'Christians Brothers College Cork'
        });

    },

    render: function () {
        this.$el.html(template({side_nav:side_nav}));
        this.initMap();       
    },


});

});

这是该应用程序的链接。当您单击“位置”时，地图将完美呈现。但是，当您导航到其他任何地方然后返回到位置时，在左上角只能看到一小部分地图。

我尝试做，这在这里建议：

google.maps.event.trigger(map, 'resize').

但无济于事。有任何想法吗？

尼科斯

您的视图在未附加到DOM的节点上工作，因此如果没有大小，则Google Map不太喜欢这种情况。PageSlider渲染功能发生后，是您的路由器通过确实添加了节点。这是您的困境的演示：http : //jsfiddle.net/3C7g3/

您有几种解决方法：

将节点插入DOMgoogle.maps.event.trigger(map, 'resize') 后调用（此位代码对应于您的地图路由器条目）

// assuming you stored the map object in your view
require(["app/views/Map"], function (Map) {
    var view = new Map();
    slider.slidePage(view.$el);
    google.maps.event.trigger(view.map, 'resize');
 });

http://jsfiddle.net/3C7g3/1/

在调用render之前将节点插入DOM。在您的情况下，这可能意味着要从中删除渲染view.initialize并在方法中调用view.renderafter 。container.append(page);slidePageFrom

http://jsfiddle.net/3C7g3/2/

一种更骇人听闻的方法是将元素临时添加到DOM，应用Google Maps，然后将其从DOM中删除

initMap: function () {
    // assuming a temp class that hides the element. For example,
   // .temp {position: absolute; visibility:hidden; }
    this.$el.addClass('temp');
    $('body').append(this.$el);
    // ...
    this.$el.remove();
    this.$el.removeClass('temp');
}

http://jsfiddle.net/3C7g3/3/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。