0

ユーザーが時間スケールをスライドできるシンプルな jQuery スライダーと、埋め込まれた Google マップ (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>

うまくいけば、これは明らかです。基本的に、これら2つの間の接着剤がありません。カーソルが移動するとスライダーの値を取得できます ( ) が、スライダーが移動するときにこの動的変数をマップ スクリプトvar time = ui.valueに渡すにはどうすればよいですか?time

これについての助けは大歓迎です。

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 に答える