0

ユーザーがマーカーをクリックしたときにアクティブなマーカーを簡単に設定しようとしています。どのマーカーがクリックされたかを追跡するために Gmap3 のタグ機能を使用しようとしています。そのため、別のマーカーがクリックされた場合、前のマーカーを以前の状態に戻すことができます。

ここに私がやろうとしていることを説明するフィドルがあります: http://jsfiddle.net/sidouglas/tKnsG/ EDIT 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);
4

2 に答える 2

0 
    (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);
于 2013-02-26T01:21:22.300 に答える
0

タグの状態を読み取り、状態を切り替える必要があります。

疑似コード

if(tag==notActive){
    tag = isActive;
    code for isActive marker
}else{
    tag = notActive;
    code for notActive marker 
}
于 2013-02-20T11:16:46.703 に答える