0

我有一个简单的 jQuery 滑块，它允许用户在时间尺度上滑动，还有一个嵌入式谷歌地图（API V3）。代码如下所示：

<script type="text/javascript">
    // Slider
    $(function() {
           $( "#slider" ).slider({
                value:0,
                min: 0.00,
                max: 24.00,
                step: 1,
                slide: function( event, ui ) {
                  $( "#amount" ).val( ui.value + " hrs");
                }
           });
           $( "#amount" ).val( $( "#slider" ).slider( "value" ) + " hrs" );
    });
</script>

紧随其后的是地图：

<script type="text/javascript">
function init() {
    // pass in json data from django
    var json_data = {{ json_data|safe }};

    // custom settings
    ...

    // initialize map 
    var map = new google.maps.Map(document.getElementById("map_canvas"), settings); 

    // create custom markers
    ...

    for (var i = 0; i < json_data.length; i++) {
        ... 
        if ( json_data[i][3] == time) {
        // custom marker logic
        ...
        }; 

    } // end for loop
} // end function         
$(function(){

// initialize map
init();

// get slider value
$("#slider").bind("slide", function(event, ui) {
    var time = ui.value;
});
</script>

希望这很清楚。我基本上错过了这两者之间的胶水。我可以在移动光标时获取滑块的值 ( var time = ui.value)，但是如何time在移动滑块时将此动态变量传递给 maps 脚本？

对此的任何帮助将不胜感激。

4

1 回答 1

0

我对您想要实现的目标一无所知，但我可以猜测一下。

for (var i = 0; i < json_data.length; i++) {
    ... 
    if ( json_data[i][3] == time) {
    // custom marker logic
    ...
    }; 
}

我相信这是每次触发“幻灯片”事件时都应该调用的代码。

好吧，您只需将这段代码移动到幻灯片处理程序中（在 var time = ui.value; 之后），这样每次都会调用它并且您可以访问 time 变量。init() 函数我相信它只被调用一次，所以它没有用。

此外，我相信您必须从更大的数据集中显示一组自定义标记。为此，请务必遍历较大数据集中的所有标记并调用 setMap(null)，以便在显示合适的标记之前隐藏所有标记。

让我知道这是否是您正在寻找的。

于 2012-10-04T09:20:28.140 回答