渲染谷歌地圖backbonejs

Question

我正在學習骨幹，我開始構建使用谷歌地圖的應用程序。我的問題是，當我試圖使谷歌地圖在我看來沒有任何反應，只出現一個包含灰色id="map_canvas"的div，就像這樣：

，並在我的控制檯登錄我有這樣的錯誤Uncaught TypeError: Cannot read property 'setCenter' of undefined

代碼我的觀點：

ev.views.Home = Backbone.View.extend({ 

    map: null, 
    pos: null, 

    initialize: function(){ 
     this.template = _.template(ev.templateLoader.get('home')); 
     this.render(); 
    }, 

    initMap: function(){ 

     if(navigator.geolocation) { 
      navigator.geolocation.getCurrentPosition(function(position) { 
       //guarda a posicao currente do utilizador 
       this.pos = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); 
       var infowindow = new google.maps.InfoWindow({ 
        map: this.map, 
        position: this.pos 
       }); 
       console.log("a minha posicao eh: " + this.pos); 
       this.map.setCenter(this.pos); 
      });  
     } 

     var mapOptions = { 
      zoom: 8, 
      //center: new google.maps.LatLng(-34.397, 150.644) 
     }; 
     this.map = new google.maps.Map(this.$el.find('#map_canvas')[0],mapOptions); 
    }, 

    render: function(){ 
     this.$el.html(this.template()); 
     this.initMap(); 
     return this; 
    } 
}); 

main.js：

var ev = new Application(); 

ev.Router = Backbone.Router.extend({ 

    routes: { 
     "": "home" 
    }, 

    initialize: function() { 
     // Caching the Welcome View 
     this.homeView = new ev.views.Home(); 
    }, 

    home: function() { 
     $('#home').html(this.homeView.el); 

    } 
}); 

$(document).on('ready', function() { 
    // Load HTML templates for the app 
    ev.templateLoader.load(['shell', 'home'], function() { 
     ev.shell = new ev.views.Shell({el: "#shell"}); 
     ev.router = new ev.Router(); 
     Backbone.history.start(); 
    }); 
}); 

Answer 1

試試這個我沒有測試：

initMap: function(){ 
this.map = new google.maps.Map(this.$el.find('#map_canvas')[0],mapOptions); 
var that = this; 
    if(navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function(position) { 
      //guarda a posicao currente do utilizador 
      that.pos = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); 
      var infowindow = new google.maps.InfoWindow({ 
       map: that.map, 
       position: that.pos 
      }); 
      console.log("a minha posicao eh: " + this.pos); 
      this.map.setCenter(this.pos); 
     });  
    } 

    var mapOptions = { 
     zoom: 8, 
     //center: new google.maps.LatLng(-34.397, 150.644) 
    }; 

}, 

Answer 2

試試下面的代碼，我希望它能工作;我沒有測試過它。

initMap: function(){ 
     var that= this; 
     var mapOptions = { 
      zoom: 8, 
      //center: new google.maps.LatLng(-34.397, 150.644) 
     }; 
     this.map = new google.maps.Map(this.$el.find('#map_canvas')[0],mapOptions); 

     if(navigator.geolocation) { 
      navigator.geolocation.getCurrentPosition(function(position) { 
       //NOTE : the scope of 'this' changes to the current function so use the fair copy of it as 'that' 
       that.pos = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); 
       var infowindow = new google.maps.InfoWindow({ 
        map: that.map, 
        position: that.pos 
       }); 
       console.log("a minha posicao eh: " + that.pos); 
       that.map.setCenter(that.pos); 
      });  
     } 
}