Question

我正在学习骨干，我开始构建一个使用谷歌地图的应用程序。我的问题是，当我尝试在我的视图中渲染谷歌地图时，没有任何反应，只显示包含div灰色的id="map_canvas"，如下所示：

enter image description here

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

Answer 2

试试这个我还没有测试过：

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

},

使用backbonejs渲染谷歌地图

2 个答案: