我在使用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] 删除。
我来说两句