隱藏帶特定ID和谷歌地圖的谷歌標記

Question

我有四種不同類型的圖標標記數組，我想用外部複選框事件隱藏特定標記。這裏是我的代碼：

prevMarkers = []; 
for(j=0;j<count;j++){ 
    if(taxiData[j].is_active == 1){ 
    if(taxiData[j].is_busy == 0){ 
     taxiIcon = 'available.png'; 
     taxiId = 'available'; 
    }else if(taxiData[j].is_busy == 1){ 
     taxiIcon = 'onway.png'; 
     taxiId = 'onway'; 
    }else if(taxiData[j].is_busy == 2){ 
     taxiIcon = 'waiting.png'; 
     taxiId = 'waiting'; 
    } 
    }else{ 
    taxiIcon = 'inactive.png'; 
    taxiId = 'inactive'; 
    } 
    tempdata = [taxiData[j].driver_id,parseFloat(taxiData[j].latitude),parseFloat(taxiData[j].longitude),taxiIcon,taxiId]; 
    taxiMarkers.push(tempdata); 
} 
console.log(taxiMarkers); 
marker.setMap(null); 
for(i = 0; i < taxiMarkers.length; i++) { 
    var position = new google.maps.LatLng(taxiMarkers[i][1], taxiMarkers[i][2]); 
    iconBase = "<?php echo Yii::app()->baseUrl; ?>" + '/images/'+(taxiMarkers[i][3]); 
    marker = new google.maps.Marker({ 
    position: position, 
    map: map, 
    icon: iconBase, 
    id:taxiMarkers[i][4], 
    // title: markers[i][0], 
    optimized:false, 
    }); 
    prevMarkers.push(marker); 

如圖所示，我有四個ID，我想禁用使用checkbox.Please提供適當的解決方案。

Answer 1

你可以用普通類checkbox添加複選框，他們每個人的價值代表圖標類型的id：

$('body').on('change', '.checkbox', function(){ 
    //show or hide markers when checkbox status changed 
}) 

：

<input type='checkbox' class='checkbox' name='my-checkbox' value='1'/>Type 1 
<input type='checkbox' class='checkbox' name='my-checkbox' value='2'/>Type 2 
<input type='checkbox' class='checkbox' name='my-checkbox' value='3'/>Type 3 
<input type='checkbox' class='checkbox' name='my-checkbox' value='4'/>Type 4 

然後使用.checkbox類change事件附加到他們在活動內部添加條件來檢查checkbox已更改是否被選中並且基於此，您將顯示或隱藏相關標記：

if($(this).is(':checked')){ 
    //show the related markers 
}else{ 
    //Hide the related markers 
} 

要與每一個checkbox獲得相關標誌物，你可以使用value：

var marker_id= $(this).val(); 

for(i = 0; i < prevMarkers.length; i++) { 
    var marker = prevMarkers[i];  
    if(marker==marker_id){ 
     //Show marker or hide it using .setMap(map); or .setMap(null); 
    } 
} 

全部JS代碼：

$('body').on('change', '.checkbox', function(){ 
    var map_or_null=null; 

    if($(this).is(':checked')){ 
     map_or_null = map; 
    } 

    var marker_id= $(this).val(); 

    for(i = 0; i < prevMarkers.length; i++) { 
     var marker = prevMarkers[i]; 

     if(marker==marker_id){ 
      marker.setMap(map_or_null); 
     } 
    } 
}) 

希望這有助於。