2013-11-04 2 views
1

Google지도 (V3)를 Backbone.js로 렌더링하는 데 문제가 있습니다.간단한 Backbone.js 및 Google지도 렌더링

지도보기 (/ #/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(); 

'뭔가'집 사이 내가 전환하고있어 전망이없는 것 같다 지도,하지만 난 그 '무언가'가 무엇인지 확실하지 않습니다. 나는 관련 질문을 통해 빗질했다고 생각하지만, 그 결점을 발견 할 수는 없다.

도움을 주시면 감사하겠습니다.

감사합니다.

(추신지도보기 부분에서 가져옵니다 : https://developers.google.com/maps/documentation/javascript/tutorial )

+0

'mapView'로 이동할 때'content '가 제거 되었습니까? – fbynite

+0

HomeView를 게시 할 수 있습니까? $ el.remove 또는 이와 유사한 항목을 호출하는 사용자 정의 정리 코드가 있습니까? – Mingle

답변

0

문제는 여기에 당신이 window.load에 초기화를 호출

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

을 생각하지만, 당신이보기 사이를 전환 할 때, 그것은 것 페이지를 새로 고치지 않고 window.load가 실행되지 않습니다. init이 일어나는 방식을 바꾸어야 할 필요가 있다고 생각합니다. 페이지의 DOM 구조에 대해 더 많은 정보가 있으면 더 잘 제안 할 수 있습니다.

+0

사실입니다. 문제가있는 곳입니다. – otmezger

관련 문제