标记图标不会在谷歌地图上第二次更改

时间:2015-01-30 16:23:50

标签: javascript jquery google-maps backbone.js google-maps-api-3

我正在构建一个使用主干搜索事件的Web应用程序。在主页中,我在右栏上有10个图像(对应于事件),每个图像都有一个事件ID。在左栏中有标记对应于图像的位置,每个标记也具有事件ID。

我有一个功能可以检测图像的事件鼠标悬停,当发生此事件时,与图像对应的标记图标会发生变化。当我对另一个图像进行鼠标悬停时,之前的图标会再次更改为默认图标。 但我的问题是,当我将鼠标悬停在同一图像上两次时,标记的图标不会改变。这是一个更好地理解这个问题的gif: the problem

我的代码:

    ev.views.Home = Backbone.View.extend({
        initialize: function(map, p, firstEntry){
            var that = this;
            that.template = _.template(ev.templateLoader.get('home'));
            ev.router.on("route", function(route, params) {
                that.deleteMarkers();
            });
            that.map = map; 
            that.firstEntry = firstEntry; 
            that.p = p; // valor da pagina
            that.icons = [];
            that.render(that.map, that.p, that.firstEntry);
        },


        local: function(map){
            ...
        },

        deleteMarkers: function(){
            ...
        },

        events: {
            'click #search' : 'searchKey',
            'click #maisFiltros' : 'maisFiltros',
            'mouseover .back' : 'overImagem'    
        },

      overImagem: function(ev){

            var target = $(ev.currentTarget);

            var id = $(target).data("id");
            this.icons.push(id);
            var last = this.icons.length-2;

            if(typeof this.icons[last] !== 'undefined'){
                if(this.icons[last] !== this.icons[last+1]){

                    for (var i = 0; i < this.marcadores.markers.length; i++) {
                        if(id == this.marcadores.markers[i].get('id')){
                            this.marcadores.markers[i].setIcon('http://maps.google.com/mapfiles/ms/icons/blue-dot.png');
                        }
                    }

                    if(this.icons.length !== 1){
                        this.marcadores.markers[last].setIcon('http://maps.google.com/mapfiles/ms/icons/red-dot.png');

                    }
                }
            }else{
                for (var i = 0; i < this.marcadores.markers.length; i++) {
                    if(id == this.marcadores.markers[i].get('id')){
                        this.marcadores.markers[i].setIcon('http://maps.google.com/mapfiles/ms/icons/blue-dot.png');
                    }
                }
            }   
        },


    searchKey: function(){
        ...

    },

    render: function(map, p, firstEntry){
        var that = this;
        that.map = map;
        that.firstEntry = firstEntry;
        that.p = p;
        that.$el.html(that.template());
        setTimeout(function() {
            that.local(that.map);

            if(that.firstEntry != 0){
                that.marcadores = new ev.views.Markers(that.map,p);
                $("#lista").html(new ev.views.ListaEventos(that.p).el);
            }else{

                that.keyword = ev.keyword.get('key');
                that.secondSearch = new ev.views.Pesquisa(that.keyword, that.p, that.map);
                $("#lista").html(that.secondSearch.el);
            }
        }, 0);
        return that;
    }

});

标记视图:

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

    initialize: function(map,p){
        this.map = map;
        this.p = p;
        this.render(this.map,this.p);
    },


    apagar: function(){
        for (var i = 0; i < this.markers.length; i++) {
            this.markers[i].setMap(null);
        }
        this.markers = [];
    },


    render: function(map,p){
        var that = this;
        that.markers = [];
        var imagens = new ev.models.ImagemCollection();
        imagens.fetch({
            success: function(){
                var len = imagens.models.length;
                var startPos = (that.p - 1) * 10;
                var endPos = Math.min(startPos + 10 , len);
                var marcadores = imagens.models;
                for (var i = startPos; i < endPos; i++) {
                    var myLatlng = new google.maps.LatLng(marcadores[i].get('latitude'),marcadores[i].get('longitude'));
                    var marker = new google.maps.Marker({
                        position: myLatlng,
                        map: that.map,
                        icon: 'http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png',
                        id: marcadores[i].get('id')
                    });
                    that.markers.push(marker);

                }
                return that;
            }
        });
    }
});

我做错了什么。

0 个答案:

没有答案