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 回答