javascript - 如何为谷歌地图创建一个 backbone.js View

Question

大家好，我正在尝试使用 backbone.js 创建 Google map View ，但我真的不明白我需要做什么才能实现它。

这是我目前所知道的(我也不确定这是否正确)。我真的不明白在这种 View 的渲染函数中需要发生什么。

  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 或 Backbone 知识(这真的无关紧要)。在其他帖子中提到了与 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

(anonymous function)

我希望还有其他人愿意为解决这个问题做出贡献。

更新 因此，根据评论，getElement 函数确实返回了 null，因此我将其切换为返回元素的 jquery 选择器

但是!，我确实得到了一个不同的错误:Uncaught TypeError: Cannot set property 'position' of undefined

关注这个主题: Uncaught TypeError: Cannot set property 'position' of undefined

我发现您不能将 jquery 元素发送到 Map 对象。所以现在我对如何从 jquery 元素中提取实际的 DOM 元素感到困惑。

关注这个主题: How to get a DOM Element from a JQuery Selector

我终于解决了。

谢谢。

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;
    },
});

Template 函数的位置:

  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>

祝你好运