1

マーカーをレンダリングする Google マップがあり、マーカー内に構築する配列の 1 つがarrTimeStamp です。これは、ユーザーがログインした時間を表す 0 ～ 24 の整数をキャプチャします。スライダーには 0 ～ currentHour が表示されます (これは、時間）。私がやりたいことは、スライダーの値に対するタイムスタンプに基づいてマーカーを非表示/表示することです。

たとえば、午後 2 時に 10 人のマーカーがログインし、午後 3 時にさらに 5 つログインしたとします。スライダーが午後 3 時にある場合、マップ上に 15 個のマーカーすべてが表示されますが、スライダーを午後 2 時までスライドすると、午後 3 時にマークされた 5 つのマーカーが非表示になり、10 個の午後 2 時のマーカーのみが表示されます。スライダーを午後 3 時に戻すと、15 件すべてが再び表示されます。

非表示と表示に .setMap(null) .setMap(map) を使用しようとしましたが、.setMap で未定義のエラーが返されます。.setMap(null) のみを使用すると正常に動作し、非表示になりますが、.setMap(map) なしでは再度表示できないため、これは一方通行です。この点で .setMap を取り巻く問題に関連する記事をいくつか見ましたが、解決策は見つかりませんでした。どんな助けでも大歓迎です。ありがとうございました。

var d = new Date();
var currentHour = d.getHours()+1;

$( "#slider" ).slider({
  value: currentHour,
  min: 0,
  max: currentHour,
  step: 1,
  slide: function( event, ui ) {
    $( "#amount" ).val(ui.value);
    var time = parseInt($('#amount').val());

    for(x = 0; x <= arrMarkers.length; x++){
        arrMarkers[x].setMap((arrTimeStamp[x] >= (currentHour - time)) ? null : map);
    }

  }
});

これがマップとスライダーのすべてのコードです。

<script type="text/javascript">
var map;
var arrMarkers = [];
var arrInfoWindows = [];
var arrTimeStamp = [];
var timeStamp = 0;
var marker = 0;
var numLocations = 0;

function mapInit()
{
    var centerCoord = new google.maps.LatLng(40, -100); // USA
    var mapOptions = {
        zoom: 5,
        center: centerCoord,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map"), mapOptions);

    var d = new Date();
    var currentHour = d.getHours()+1;
    $.getJSON("http://www.URL.com/superadmin/json/map-data.cfc?method=getFeedData&feedType=location&timespan=" + currentHour, {}, function(data)
    {

        $.each(data.DATA, function(i, item)
        {

            numLocations++;
            $('#locationsOnline').html(numLocations);

            // displays proper image for marker
            function markerinformation()
            {
                var markerImage = 'http://www.URL.com/css/images/map_property_green_pin.png';
                return markerImage;
            }

            markerTitle = item.LOCATIONNAME


            // creates the markers
            var marker = new google.maps.Marker(
            {
                position: new google.maps.LatLng(item.LOCATIONLATITUDE, item.LOCATIONLONGITUDE),
                map: map,
                title: markerTitle,
                icon: markerinformation()
            });

            arrMarkers[i] = marker;

            // infowindow content
            var infowindow = new google.maps.InfoWindow(
            {
                content: "<p><b>Location:</b> " + item.LOCATIONNAME + "</p><p><b>Customer:</b> " + item.CUSTOMERNAME + "</p><p>" + item.LOCATIONCITY + ", " + item.LOCATIONSTATE + "</p>"
            });

            arrInfoWindows[i] = infowindow;

            // "live" bind click event
            google.maps.event.addListener(marker, 'click', function()
            {
                // this closes all open infowindows before opening the selected one
                for(x = 0; x < arrInfoWindows.length; x++)
                {
                    arrInfoWindows[x].close();
                }
                infowindow.open(map, marker); // open the clicked marker infowindow

            });

            arrTimeStamp[i] = item.TIMESTAMP;


        });
    });


}

$(function() {

mapInit(); // initialize map (create markers, infowindows, and list)
var d = new Date();
var currentHour = d.getHours()+1;

$( "#slider" ).slider({
  value: currentHour,
  min: 0,
  max: currentHour,
  step: 1,
  slide: function( event, ui ) {
    $( "#amount" ).val(ui.value);
    var time = parseInt($('#amount').val());

    for(x = 0; x <= arrMarkers.length; x++){
        arrMarkers[x].setMap((arrTimeStamp[x] >= (currentHour - time)) ? null : map);
    }

  }
});

  });
  </script>
4

1 に答える 1

3

問題はここにあります：

for(x = 0; x <= arrMarkers.length; x++){

JS 配列はインデックスがゼロなので、これを次のように変更する必要があります。

for(x = 0; x < arrMarkers.length; x++){

たとえば、配列に 3 つの要素がある場合、(当然のことながら) 3 回ループする必要があります。だから参考にしたい

arrMarkers[0]
arrMarkers[1]
arrMarkers[2]

x = arrMarkers.length まで上げると、存在しない arrMarkers[3] を参照することになります。

于 2013-01-18T16:38:01.443 に答える