Question

我有一个Google地图可以渲染标记，我在标记中构建的其中一个数组是 arrTimeStamp 这会捕获一个0到24的整数，表示用户登录的小时数。滑块显示0 - currentHour（当前时间四舍五入到小时）。我想要做的是根据相对于滑块值的时间戳隐藏/显示标记。

示例如果我在下午2点登录10个标记，然后在下午3点登录5个标记。当滑块在下午3点时，我应该在地图上看到所有15个标记，但如果我将滑块滑动到下午2点，它应该隐藏标记为下午3点的5个标记，因此仅显示10个2pm标记。如果我将滑块滑回到下午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>

Answer 1

问题在于：

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

JS数组是零索引的，因此您需要将其更改为：

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

e.g。如果你的数组有3个元素你想循环三次（显然）。所以你想引用

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

如果你去x = arrMarkers.length，你将指的是不存在的arrMarkers [3]。

滑块隐藏/显示谷歌地图标记

1 个答案: