javascript - 用bellyjs渲染谷歌 map

我正在学习骨干，并且开始构建使用Google Maps的应用程序。我的问题是，当我尝试在视图中渲染Google地图时，什么也没发生，仅显示包含div的id="map_canvas"灰色，如下所示：



并且在我的控制台日志中，我出现此错误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();
    });
});

最佳答案

试试这个我还没有测试：

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)
    };

},