如何为Google地图创建backbone.js视图

Question

嗨,大家好我想用backbone.js创建一个谷歌地图视图,但我真的不明白我需要做什么才能实现它.

这是我到目前为止(我不确定这是否也是正确的).我真的不明白在这种视图的渲染函数中需要发生什么.

  MYAPP.Widgets.Map = Backbone.View.extend({
    template : template('grid-12'),
    initialize: function(){
    },
    activate: function(){
        var mapOptions = {
                  zoom: 8,
                  center: new google.maps.LatLng(-34.397, 150.644),
                  mapTypeId: google.maps.MapTypeId.ROADMAP
                };
    this.map = new google.maps.Map(document.getElementById('googleMapBox'),mapOptions);
    },
    render: function(){
        this.$el.html(this.template(this));
        this.activate();
        return this;
    },
});

谢谢

编辑:我查看了tkone提到的主题.我没有看到那里的答案,我真的不明白为什么他拒绝在这件事上提供任何真正的帮助.这可能源于我对JS或骨干的缺乏知识(这无关紧要).在其他帖子中提到了与tkone相同的问题,其他用户无法理解如何使这项工作.

我设法得到这个远,但我得到这个错误

   Uncaught TypeError: Cannot read property 'offsetWidth' of null main.js:28
                                                               ih main.js:28
                                                               Lh main.js:34
MYAPP.Widgets.Map.Backbone.View.extend.activate MTAPP.widgets.js:23
MYAPP.Widgets.Map.Backbone.View.extend.render MYAPP.widgets.js:38

(匿名功能)

我希望其他任何可能想要为解决这个问题做出贡献的人.

更新所以在注释后getElement函数确实返回null,所以我用一个返回元素的jquery选择器将其切换

但是!我确实得到了一个不同的错误:Uncaught TypeError:无法设置undefined的属性'position'

遵循以下主题: Uncaught TypeError:无法设置undefined的属性"position"

我看到你不能发送一个jquery元素到Map对象.所以现在我不知道如何从jquery中提取实际的DOM元素.

遵循以下主题: 如何从JQuery选择器获取DOM元素

我终于能够解决它了.

谢谢.

Answer 1

我得到解决方案的方式是感谢@dbaseman和我发现的其他线程的评论,所有这些都列在实际问题中.我将发布完整的解决方案:

   MYAPP.Widgets.Map = Backbone.View.extend({
    template : template('grid-12'),
    initialize: function(){
    },
    activate: function(){
        var mapOptions = {
                  zoom: 8,
                  center: new google.maps.LatLng(-34.397, 150.644),
                  mapTypeId: google.maps.MapTypeId.ROADMAP
                };
        var domElement = this.$('#googleMapBox');
        this.map = new google.maps.Map(domElement.get(0),mapOptions);
    },
    render: function(){
        this.$el.html(this.template(this));
        this.activate();
        return this;
    },
});

模板功能只是:

  var template = function (name) {
    var source = $('#' + name + '-template').html();
    return Handlebars.compile(source);
};

模板本身是:

<script type="text/x-mustache-template" id="grid-12-template">
<div class="row-fluid sortable ui-sortable">
            <div class="box span12">
                <div class="box-header">
                    <h2><i class="icon-th"></i><span class="break"></span>thegrid</h2>
                    <div class="box-icon">
                        <a href="#" class="btn-setting"><i class="icon-wrench"></i></a>
                        <a href="#" class="btn-minimize"><i class="icon-chevron-up"></i></a>
                        <a href="#" class="btn-close"><i class="icon-remove"></i></a>
                    </div>
                </div>
                <div id="googleMapBox" class="box-content">
              </div>
            </div><!--/span-->
        </div>
</script>

祝好运