1

Backbone.js を使用した Google マップ (V3) のレンダリングに問題があります。

マップ ビュー (/#/map) に移動すると、読み込みに失敗します。ただし、そのマップ ビューの URL で更新を押すと、マップはどういうわけか完全に正常に読み込まれます。

以下の関連コード:

<body>
    <a href="#">Home</a>
    <div id="content"></div>


    <script type="text/template" id="home_template">
        <a href="#/map">Go !</a>
    </script>

    <script type="text/template" id="map_template">
        <div id="map"></div>
    </script>
</body>

var MapView = Backbone.View.extend({
    el: '#content',

    render: function() {
        var template = _.template($('#map_template').html());
        var init = function() {
            var mapOptions = {
                center: new google.maps.LatLng(-34.397, 150.644),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map"),
            mapOptions);
        }
        google.maps.event.addDomListener(window, 'load', init);
        this.$el.html(template);
    }
});

var Router = Backbone.Router.extend({
    routes: {
        ""      :   "home",
        "map"   :   "map" 
    }
});
var router = new Router;

var homeView = new HomeView();
router.on('route:home', function() {
    homeView.render();
});

var mapView = new MapView();
router.on('route:map', function() {
    mapView.render();
});

Backbone.history.start();

ホーム画面とマップ画面を切り替えると「何か」が抜けているように見えますが、その「何か」が何かわかりません。関連する質問をくまなく調べたと思いますが、欠けている点を見つけることができません。

どんな助けでも大歓迎です。

ありがとうございました！

(PS Mapview の部分はhttps://developers.google.com/maps/documentation/javascript/tutorialから取得 )

4

1 に答える 1

0

問題はここにあると思います

google.maps.event.addDomListener(window, 'load', init);

window.load で init を呼び出していますが、ビューを切り替えるとページが更新されず、window.load がトリガーされません。init の発生方法を変更する必要があると思います。ページの DOM 構造に関する詳細情報があれば、より良い提案ができるかもしれません。

于 2013-11-04T08:11:30.153 に答える