不同的标记颜色jquery

时间:2013-09-28 21:10:18

标签: javascript jquery jquery-ui google-maps google-maps-api-3

我的演示中有一个jQuery范围滑块 - http://jsfiddle.net/dLWNc/35/

$( ".slider-range" ).slider({
      range: true,
      min: stations.min_value,
      step: stations.step_value,
      max: stations.max_value,
      values: [stations.min_range, stations.max_range],
      slide: function( event, ui ) {
        $("#min").val(ui.values[ 0 ]);
        $("#max").val(ui.values[ 1 ]);
      }
    });

如何动态过滤和设置新的图标标记,地图如下所示:

enter image description here

1 个答案:

答案 0 :(得分:2)

遍历所有标记并使用setIcon()根据值将标记的url设置为图像。

示例:

  $.each(station,function(i,v){

    var icon=((v.value < ui.values[0])
                ? 'http://labs.google.com/ridefinder/images/mm_20_yellow.png'
                : ((v.value > ui.values[1])
                     ? 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
                     : 'http://www.google.com/mapfiles/marker.png'
               ));
    StationMarkers[i].setIcon(icon);
  });