如何为谷歌地图创建一个backbone.js 视图答案

【问题标题】：How to create a backbone.js view for Google maps如何为谷歌地图创建一个backbone.js 视图
【发布时间】：2013-02-04 19:41:58
【问题描述】：

大家好，我正在尝试使用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

（匿名函数）

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

更新所以在 cmets 之后，getElement 函数确实返回了 null，所以我用一个返回元素的 jquery 选择器来切换它

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

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

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

关注这个话题： How to get a DOM Element from a JQuery Selector

我终于解决了。

谢谢。

【问题讨论】：

Mixing Google Maps custom overlays with Backbone Views的可能重复
如果这不能直接解决问题，我有一堆代码可以完全解决这个问题，我可以给你看。
Re：渲染功能，在地图上你想做的任何事情（设置pins、cluster等）
@tkone 用该代码示例回答问题会不会更好？
@Gleeb 那么$("#googleMapBox") 实际上是否返回任何东西（除了一个空数组）？如果是这样，则使用$("#googleMapBox")[0] 获取实际的Javascript 元素对象。如果不是，则您需要该元素尚未呈现到页面，您需要找出原因。

标签： javascript backbone.js google-maps-api-3

【解决方案1】：

我得到解决方案的方式要感谢@dbaseman 的 cmets 和我发现的其他线程，所有这些都列在实际问题中。我将发布完整的解决方案：

   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>

祝你好运

【讨论】：