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，我想禁用复选框。请提供适当的解决方案。

Answer 1

您可以添加一般类checkbox的复选框，其中每个人的值代表图标类型的id：

<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

然后使用课程change将<{1}}事件附加到他们身上：

.checkbox

在事件内添加条件以检查是否已更改$('body').on('change', '.checkbox', function(){ //show or hide markers when checkbox status changed })已更改，并根据此情况显示或隐藏相关标记：

checkbox

要获取每个if($(this).is(':checked')){ //show the related markers }else{ //Hide the related markers }的相关标记，您可以使用checkbox：

value

完整的JS代码：

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);
    }
}

希望这有帮助。

隐藏具有特定ID +谷歌地图的谷歌标记

1 个答案: