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 回答