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

我试图做一个简单的设置标记，当用户点击标记时激活。我正在尝试使用Gmap3的标记功能跟踪点击了哪个标记，因此如果点击了另一个标记，则可以将之前的标记返回到之前的状态。jQuery Gmap3设置标记点击时激活，而其他标记设置为默认

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

的症结是正在发生的事情上的click事件：

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

来源

2013-02-19 Simon

您需要阅读标签的状态并切换状态。

伪代码

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

来源

2013-02-20 11:16:46

是的，我知道你在说什么，但我期待的设置标签的手段。我不确定jQuery的gmap3插件是否有办法做到这一点。 – Simon 2013-02-21 05:30:40

看到这个[DEMO]（http://gmap3.net/en/pages/19-demo/）第二个与'var clear = {name：“marker”};'这可能有助于 – 2013-02-21 10:50:31

作者回应该标签一旦设置就不能更改。我重构了代码，最后它非常简单。 – Simon 2013-02-26 01:17:52

(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-26 01:21:22 Simon

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

回答

相关问题