2

大家好，我正在尝试使用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选择器切换它

但是！，我确实得到了一个不同的错误：未捕获的类型错误：无法设置未定义的属性“位置”

在此线程之后： 未捕获的类型错误：无法设置未定义的属性“位置”

我看到您无法将 jquery 元素发送到 Map 对象。所以现在我坚持如何从 jquery 中提取实际的 DOM 元素。

关注这个线程： 如何从 JQuery 选择器中获取 DOM 元素

我终于能够解决它。

谢谢你。

4

1 回答 1

7

我得到解决方案的方式要归功于@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>

祝你好运

于 2013-02-06T20:32:29.600 回答