2

こんにちはみんな私はbackbone.jsでGoogleマップビューを作成しようとしていますが、それを達成するために何をする必要があるのか​​本当に理解していません。

これは私がこれまでに持っているものです（そしてそれが正しいかどうかもわかりません）。そして、私はこの種のビューのレンダリング関数で何が起こる必要があるのか​​本当に理解していません。

  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

（無名関数）

この問題の解決に貢献したいと思う人が他にいることを願っています。

UPDATEコメントに続いて、getElement関数はnullを返したので、要素を返すjqueryセレクターに切り替えました

しかし、私は別のエラーを受け取りました：Uncaught TypeError：undefinedのプロパティ'position'を設定できません

このスレッドに続いて： Uncaught TypeError：undefinedのプロパティ'position'を設定できません

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 に答える