简单的Backbone.js和Google Maps Rendering

约翰·汉斯伯格

我在使用Backbone.js渲染Google Maps(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

拉维·哈姆萨

我猜问题在这里

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

您正在window.load上调用init,但是在视图之间切换时,它将不会刷新页面,并且window.load永远不会被触发。我想您需要更改初始化发生的方式,如果我有关于页面DOM结构的更多信息,我可以提出更好的建议。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Backbone.js是否带有Google Maps API Events?

来自分类Dev

简单的Backbone.js集合无限分页

来自分类Dev

使用Google Maps API放心的简单测试

来自分类Dev

温泉UI和Angular JS Google Maps

来自分类Dev

Angular Js和Google Maps API ngGeolocation

来自分类Dev

DocumentFragment和Google Maps

来自分类Dev

Google Maps JS API v3-简单多个标记V2

来自分类Dev

Google Maps Angular Js

来自分类Dev

Google Maps JS API-获取西北和东南界

来自分类Dev

带有JS和JSTL的Google Maps Multiple Marker

来自分类Dev

Kendo UI和Google Maps

来自分类Dev

Google Maps Markers和AngularJS

来自分类Dev

Google Maps和SqlLite的性能

来自分类Dev

Backbone views not rendering without predefined el specified

来自分类Dev

Blazor:Google Maps JS API

来自分类Dev

如何使用require.js设置简单的Backbone / Marionette项目及其依赖项

来自分类Dev

Apple Maps 和 Google Maps API 可行性

来自分类Dev

尝试获取简单的Google Maps示例以与AngularJS一起使用

来自分类Dev

如何将简单的滑块图像放在Google Maps InfoWindow中?

来自分类Dev

尝试获取简单的Google Maps示例以与AngularJS一起使用

来自分类Dev

为什么我的简单Google Maps演示无法在JSFiddle上运行?

来自分类Dev

图例Google Maps API v3中的简单过滤器

来自分类Dev

如何使简单的标记生物失速CodeIgniter-Google-Maps-V3-API-Library

来自分类Dev

Google Maps iOS SDK和情节提要

来自分类Dev

Google Maps和Jasny Bootstrap offcanvas

来自分类Dev

Google Maps和WCAG 2.0 A级

来自分类Dev

Ionic Sidemenu和本机Google Maps

来自分类Dev

Javascript变量声明和Google Maps

来自分类Dev

Reactjs Antd库和Google Maps的地方