jquery - jQuery Gmap3在点击时设置标记激活，而其他标记设置为默认值

Question

当用户单击标记时，我正在尝试做一个简单的设置标记活动。我正在尝试使用 Gmap3 的标记功能来跟踪单击了哪个标记，因此如果单击另一个标记，则可以将先前的标记返回到其先前的状态。

这是一个解释我要做什么的小提琴：http: //jsfiddle.net/sidouglas/tKnsG/ 编辑2：jsfiddle（PEBKAC）

症结在于点击事件发生了什么：

           events: {
                    click: function (marker, event, context) {

                       // this section does not work, as the tag 'notActive'
                       // has not been set to isActive
                       var activeMarkers = Map.gmap3({
                                       get: {
                                           name:'marker',
                                           all : true,
                                           tag : 'isActive'
                                       }
                                    });

                       for( var i in activeMarkers ){
                        var activeMarker = activeMarkers[i];
                        activeMarker.setOptions({
                                icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=A|374D7E|FFFFFF'
                        });
                       }

                      // Set the icon as active.
                      // Need to set this tag as 'isActive' 
                      var letter = context.tag[0];
                      marker.setOptions({
                         icon : 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + letter + '|FFFFFF|000000'
                      });
                      // marker.somehowSetTag({ tag:[letter,'isActive']});

                    }
                }

解决方案：

    (function ($) {
    $(function () {
        var Map = $('#map');
        Map.init = function (data) {
            Map.postData = data;
            Map.gmap3({
                map: {
                    options: {
                        center: [13.752222, 100.493889],
                        zoom: 4
                    }
                },
                marker: {
                    values: [
                        {id: 1, address:"Lopburi",   tag:['A'], options:{
                          icon: '//chart.apis.google.com/chart?chst=d_map_pin_letter&chld=A|374D7E|FFFFFF'

                        }},
                        {id: 2, address:"Koh Samui", tag:['B'], options:{
                          icon: '//chart.apis.google.com/chart?chst=d_map_pin_letter&chld=B|374D7E|FFFFFF'
                        }},
                        {id: 3, address:"Chaingmai", tag:['C'], options:{
                          icon: '//chart.apis.google.com/chart?chst=d_map_pin_letter&chld=C|374D7E|FFFFFF'
                        }}
                    ],
                    options: {
                        draggable: false
                    },
                    events: {
                        click: function (marker, event, context) {

                            var currentMarker = Map.currentMarker || false;

                            if( currentMarker ){
                                currentMarker.setOptions({
                                    icon: currentMarker.icon.replace('|FFFFFF|000000','|374D7E|FFFFFF')
                                });
                            }                         

                          var letter = context.tag[0];
                          marker.setOptions({
                             icon : '//chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + letter + '|FFFFFF|000000'
                          });

                          Map.currentMarker = marker;

                        }
                    }
                }
            });
        };
        Map.init();
    });
})(jQuery);      

Answer 1

您需要读取标签的状态并在状态之间切换。

伪代码

if(tag==notActive){
    tag = isActive;
    code for isActive marker
}else{
    tag = notActive;
    code for notActive marker 
}

Answer 2

    (function ($) {
    $(function () {
        var Map = $('#map');
        Map.init = function (data) {
            Map.postData = data;
            Map.gmap3({
                map: {
                    options: {
                        center: [13.752222, 100.493889],
                        zoom: 4
                    }
                },
                marker: {
                    values: [
                        {id: 1, address:"Lopburi",   tag:['A'], options:{
                          icon: '//chart.apis.google.com/chart?chst=d_map_pin_letter&chld=A|374D7E|FFFFFF'

                        }},
                        {id: 2, address:"Koh Samui", tag:['B'], options:{
                          icon: '//chart.apis.google.com/chart?chst=d_map_pin_letter&chld=B|374D7E|FFFFFF'
                        }},
                        {id: 3, address:"Chaingmai", tag:['C'], options:{
                          icon: '//chart.apis.google.com/chart?chst=d_map_pin_letter&chld=C|374D7E|FFFFFF'
                        }}
                    ],
                    options: {
                        draggable: false
                    },
                    events: {
                        click: function (marker, event, context) {

                            var currentMarker = Map.currentMarker || false;

                            if( currentMarker ){
                                currentMarker.setOptions({
                                    icon: currentMarker.icon.replace('|FFFFFF|000000','|374D7E|FFFFFF')
                                });
                            }                         

                          var letter = context.tag[0];
                          marker.setOptions({
                             icon : '//chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + letter + '|FFFFFF|000000'
                          });

                          Map.currentMarker = marker;

                        }
                    }
                }
            });
        };
        Map.init();
    });
})(jQuery);