滑塊隱藏/顯示Google地圖標記

Question

我有一個呈現標記的Google Map，並且我在標記內構建的陣列之一是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（地圖）的情況下再次顯示它們。在這方面我見過幾篇關於.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++){ 

例如如果你的數組有3個元素你想循環三次（顯然）。所以，你要引用

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

，如果你去到X = arrMarkers.length，你會提到arrMarkers [3]，它不存在。