过滤标记不会在第二个过滤器中显示信息窗口

Question

我想根据数据库中的类别过滤标记。 infowindow显示在窗口负载上。

infowindow在第一个过滤器中完美加载，也就是当我从选择下拉列表中选择一个类别时，标记将在其顶部以infowindow过滤。但是，第二个过滤器行为异常，infowindow不会显示在第二个连续过滤器上的标记上。

以下是我如何过滤标记：

filterMarkers = function (category) {
    for (i = 0; i < markers1.length; i++) {
         #markers1 is a list of markers 
        marker = gmarkers1[i]; #gmarkers is an array of different markers
        infowindow_content = InfoWindow1[i];

        // If is same category or category not picked
        if (marker.category == category || category.length === 0) {
            marker.setVisible(true);
        }
        // Categories don't match 
        else {
            marker.setVisible(false);
            infowindow_content.close();
        }
    }
}

我也可以在控制台中获取infowindow内容。如果这段代码不够，我很高兴上传我的整个代码。提前感谢您的帮助。

更新 我的其余代码：

var gmarkers1 = [];
var markers1 = [];
var InfoWindow1 = [];
// Our markers
markers1 = [
    {% for d in data %}
        [ '{{d.current_address_gr}}', {{ d.current_address_lat }}, {{ d.current_address_lng }},"{% profile_name_tag d.profile.id "False" "False" %}", '{{ d.current_department.name }}', '{{d.employee_level.name}}' ], 
    {% endfor %}
];

/**
 * Function to init map
 */
function initialize() {
    var center = new google.maps.LatLng(27.7033, 85.3224);
    var mapOptions = {
        zoom: 12,
        center: center,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);
    for (i = 0; i < markers1.length; i++) {
        addMarker(markers1[i]);
    }

    // autocomplete the place input field 
    var input = /** @type {HTMLInputElement} */(
          document.getElementById('place-input'));

    var types = document.getElementById('type-selector');
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);

    var autocomplete = new google.maps.places.Autocomplete(input);
    autocomplete.bindTo('bounds', map);

    google.maps.event.addListener(autocomplete, 'place_changed', function() {
        // infowindow.close();
        // marker.setVisible(false);
        var place = autocomplete.getPlace();
        if (!place.geometry) {
          return;
        }

        // If the place has a geometry, then present it on a map.
        if (place.geometry.viewport) {
          map.fitBounds(place.geometry.viewport);
        } else {
          map.setCenter(place.geometry.location);
          map.setZoom(17);  
        }

            address = [
                (place.address_components[0] && place.address_components[0].short_name || ''),
                (place.address_components[1] && place.address_components[1].short_name || ''),
                (place.address_components[2] && place.address_components[2].short_name || '')
            ].join(' ');

    });
}

/**
 * Function to add marker to map
 */

function addMarker(marker) {
    var category = marker[4];
    var level = marker[5];
    var pos = new google.maps.LatLng(marker[1], marker[2]);
    var content = '<div id="infowindow">' + marker[3] + '</div>';

    marker1 = new google.maps.Marker({
        position: pos,
        category: category,
        level : level,
        map: map,
    });

    gmarkers1.push(marker1);

    var infowindow = new google.maps.InfoWindow({
        content: content,
    });

    infowindow.open(map, marker1);
    //marker onload listener
    google.maps.event.addListener(marker1, 'load', function() {
        infowindow.open(map, marker1);
    });

    InfoWindow1.push(infowindow);
    // Marker click listener
    google.maps.event.addListener(marker1, 'click', (function (marker1, content) {
        return function () {
            console.log('Gmarker 1 gets pushed');
            infowindow.setContent(content);
            infowindow.open(map, marker1);
            map.panTo(this.getPosition());
            map.setZoom(15);
        }
    })(marker1, content));
}

Answer 1

我创建了一个与您根据类别显示标记的逻辑匹配的小代码。 你能从我的代码中得到一些帮助吗？如果您有任何疑问，请发表评论。

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    
    <title>Info windows</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
    <script>


var map;
var allMarkers = []; // All markers
var infoWindows = []; //All InfoWindows

function initialize() {
  
  //Total 5 markers
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var myLatlng2 = new google.maps.LatLng(-27.363882,130.044922);
  var myLatlng3 = new google.maps.LatLng(-28.363882,134.044922);
  var myLatlng4 = new google.maps.LatLng(-21.363882,136.044922);
  var myLatlng5 = new google.maps.LatLng(-24.363882,138.044922);

  var locationArr = [myLatlng, myLatlng2, myLatlng3, myLatlng4, myLatlng5];

  //All infowindow content
  var contentString = '<div id="content"> ONE </div>';
  var contentString2 = '<div id="content"> TWO </div>';
  var contentString3 = '<div id="content"> THREE </div>';
  var contentString4 = '<div id="content"> FOUR </div>';
  var contentString5 = '<div id="content"> FIVE </div>';

  var contentArr = [contentString, contentString2, contentString3, contentString4, contentString5];


  var mapOptions = {
    zoom: 4,
    center: myLatlng
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  //Adding all markers to map
  for(var i=0;i<5;i++){
    
    var infowindow = new google.maps.InfoWindow({
        content: contentArr[i]
    });  
    infoWindows.push(infowindow);
  
    var marker = new google.maps.Marker({
        position: locationArr[i],
        map: map,
        title: 'This is marker '+(i+1)
    });

    //adding category as either even or odd
    if(i%2==0){
      marker['category']="odd";  
    }else{
      marker['category']="even";  
    }
    
    //pushing markers with infowindow
    allMarkers.push(marker);
    infowindow.open(map,marker);
    
  }
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas" style="height: 600px; width: 1000px;"></div>
    <select id="evenOdd">
      <option value="even">even</option>
      <option value="odd">odd</option>
    </select>


  </body>
  <script type="text/javascript">
    $(document).ready(function(){
      $("#evenOdd").change(function(){
        
        //get category from select
        var category = $(this).val();
        for(var i=0;i<allMarkers.length;i++){
          
          //If category matches, show that marker with infowindow open
          if(category == allMarkers[i].category){
            
            console.log(allMarkers[i].category);
            allMarkers[i].setVisible(true);
            infoWindows[i].open(map,allMarkers[i]);
            
          }else{
            //else, hide that marker with infowindow close
            allMarkers[i].setVisible(false);
            infoWindows[i].close();
          }
        }

      });
    })

  </script>
</html>

＆＃13;

＆＃13;

＆＃13;