google-maps-api-3 - 带有主干的Google Maps API，如何绑定事件

Question

我已经看过其他几篇关于此的帖子，但这些回复的答案对我不起作用。

其他回应：

如何绑定谷歌地图 geocoder.geocode() 回调函数

Backbone.js 和谷歌地图——这个和听众的问题

我的代码：

var ns = namespace('camelcase.geomanager.map');

ns.Site = Backbone.Model.extend({
    url: '/site'
});

ns.Sites = Backbone.Collection.extend({
    model: ns.Site
});

ns.MapView = Backbone.View.extend({
    
    initialize: function() {
        this.markers = new Array();
        
        // Create the Google Map
        var mapOptions = {
                center: new google.maps.LatLng(-34.397, 150.644),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        this.googleMap = new google.maps.Map(this.$(".mapCanvas")[0], mapOptions);
        
        // Register events
        this.collection.on('add', this.addSite, this);
        this.collection.on('remove', this.removeSite, this);
    },
    
    addSite: function(model) {
    // Get model attributes
    var elementId = model.get('elementId');
    var latitude = model.get('latitude');
    var longitude = model.get('longitude');
    var id = model.get('id');
    var notes = model.get('notes');
    var title = ""+id;
    
    // Create icon and marker
    var icon = '/resources/img/elements/' + elementId + '_marker.png';
    var latLng = new google.maps.LatLng(latitude, longitude);
    var marker = new google.maps.Marker({
        position: latLng,
        title: title,
        map: this.googleMap,
        icon: icon
    });
    
    // Load info window
    var siteBubbleTemplate = _.template($('#siteBubbleTemplate').html());
    var siteContent = $(siteBubbleTemplate({
        siteId: id,
        siteNotes: notes
    }))[0];
    
    var infoWindow = new google.maps.InfoWindow({
        content: siteContent
    });
    
    // Show info window when clicking on marker
    _.bindAll(this, this.openSite);
    google.maps.event.addListener(marker, 'click', this.openSite(id));
        
        this.markers.push({
            id: id,
            marker: marker,
            infoWindow: infoWindow
        });
        
    },
    
    openSite: function(id) {
        var marker;
        for (var c=0; c<this.markers.length; c++) {
            marker = this.markers[c];
            
            // Open the appropriate marker info window
            if (marker.id == id) {
                marker.infoWindow.open(googleMap, marker.marker);
            }
            
            // Close the rest
            else {
                marker.infoWindow.close();
            }
        }
    }
});

违规行：

google.maps.event.addListener(marker, 'click', this.openSite(id));

firebug 中报告的错误：

类型错误：函数未定义

underscore.js（第 482 行）

Answer 1

我怀疑 this.marker 是问题所在，因为您应该可以只按名称引用它。

google.maps.event.addListener(marker, 'click', this.openSite(id));

Answer 2

看起来这是一个范围界定问题。我用以下代码解决了我的问题：

// Show info window when clicking on marker
_.bindAll(this);
var _self = this;
var doSomething = function(event) {
    _self.openSite({
        event: event
    });
};
google.maps.event.addListener(marker, 'click', doSomething);

谁能最好地解释为什么会这样，我会给出答案。

Answer 3

在模型/集合事件处理程序中，Backbone 将“this”设置为引发事件的模型/集合。如果您在视图的 initialize() 中调用 _.bindAll(this)，则“this”将被设置为事件处理程序中的视图。看看这个 jsfiddle： http: //jsfiddle.net/9cvVv/339/看看当你取消注释时会发生什么 _.bindAll(this);

var MyView = Backbone.View.extend({
    initialize: function() {
        // TODO: uncomment this line
        // _.bindAll(this);
        this.collection.bind('myEvent', this.onDoSomething);
    },

    updateCollection: function() {
        this.collection.doSomething();
    },

    onDoSomething: function() {
        if (this.models && typeof this.models.length === 'number') {
            alert('"this" is a collection.');
        }
        else if (this.collection) {
            alert('"this" is the view.');
        }
        else {
            alert('"this" is something else.');
        }
    }
});