Google 地图标记多 select 问题

Question

所以我目前正在尝试使我的标记上的所有过滤器成为多重select。我运行遇到的问题是：

如果我想查找所有活跃的人，我按下下拉菜单并单击活跃。然后下拉菜单关闭并给我所有活跃的人。但是假设我想看到活跃和不活跃的人。我再次单击下拉菜单，然后单击非活动。每个标记都消失了。我认为这与 for 循环没有注册不可见的标记有关，即 marker.setVisible(false);

所以我尝试同时放置 marker.setVisible(true); 和 marker.setMap(map); 但问题仍然存在。我想我需要让所有的标记都可见，这样它才能清楚地看到所有的标记。也许我错了，我错过了一些东西。这是我当前的代码：

JS:

filterMarkers = function(fieldID){


        var selective = document.getElementById(fieldID).options;

        var arrayOfSelectedIDs = [];

        for (i = 0; i < selective.length; i++)
        {
          if (selective[i].selected){
            arrayOfSelectedIDs.push(selective[i].value)
          }
        }
        console.log(arrayOfSelectedIDs);

        for (i = 0; i < gmarkers.length; i++)
        {
          marker = gmarkers[i];
          marker.setMap(map)
          marker.setVisible(true);
          console.log(gmarkers.length);

          if (marker.status.includes(arrayOfSelectedIDs)) 
          {
            marker.setVisible(true);
          }
          else {
            marker.setVisible(false);
          }

HTML:

<select class="status-multiple" required name="status[]" multiple="multiple" id="status" onchange="filterMarkers(this.id);" style="width: 7%;">
  <option></option>
  <option value="Active">Aktiv</option>
  <option value="Inactive">Inaktiv</option>
  <option value="Prospective">Prospective</option>
</select>

Answer 1

如果没有构建功能演示的数据，则无法进行最终测试，但以下机制对我的 map/data 有效。我唯一没有测试过的难题是从单个 select 菜单中过滤多个项目 - markers.filter() 中的 f 部分代码可能需要进一步考虑才能 100% 工作！但是，如果您运行片段，您将看到正在构建的过滤器，这应该可以很好地了解正在发生或将要发生的事情，但没有数据无法进行测试。

我从您的代码中提取了 select 菜单，并通过添加 className 来定位它们并将 ID 更改为名称，对它们进行了一些修改。我希望您能够了解如何利用它并使其适应您的代码。

/*
  The `select` menus all have an initial option that has no value
  and negates that `select` menu from the final filtering if it is
  selected. Without that initial empty option there would be no means
  by which the filter could be removed.
*/

let markers=[
  /*
    this is an array of the markers. Each marker has attributes that can 
    be targeted by these filters - such as `gender`, `grade`, `tutor_gym`
    
    We can check a markers property like: mkr.grade or mkr.gender etc
    which will be done by the logic in the filtering function - 
    ie:
    markers.filter()
    
    
  */
];

let filters={};
let CN='filtered';





const filterMarkers=function(e){
  // add/remove `filtered` class depending upon option selected
  if( this.selectedIndex==0 && this.classList.contains( CN ) ){
    this.classList.remove( CN );
    if( this.hasAttribute('multiple') ){
        [...this.options].forEach((o,i)=>{
          if( filters.hasOwnProperty(`${this.name}[${i}]`) )delete filters[`${this.name}[${i}]`];
        });
    }else{
      delete filters[ this.name ];
    }
  }else this.classList.add( CN );

  // hide all markers
  if( markers )markers.forEach( mkr=>mkr.setVisible( false ) );



  /* 
    process ALL select menus
    ------------------------
    Stage 1: prepare filters
    Stage 2: filter the markers array based upon filters
    Stage 3: display markers returned after filtering.
  */

  // 1 - prepare
  let col=document.querySelectorAll( `select.${CN}` );
    col.forEach( n=>{
      if( n.hasAttribute('multiple') ){
      
        // delete filters where there is the multiple attribute set
        [...n.options].forEach((o,i)=>{
          if( filters.hasOwnProperty(`${n.name}[${i}]`) )delete filters[`${n.name}[${i}]`];
        });
        
        // then add only those selected options to the filters...
        [ ...n.selectedOptions ].forEach((obj,i)=>{
          filters[ `${n.name}[${i}]`]=obj.value;
        })

      }else{
        filters[ n.name ]=n.value;
      }
    });
    
    // this will show what filters will be applied
    console.log( filters );

    // 2 - filter
    let filtered=markers.filter( function( mkr ){
      let res=true;
      Object.keys( filters ).forEach( ( name, i ) => {
        res = res && filters[ name ]===mkr[ name ];
      });
      return res;
    });

    // 3 - display
    filtered.forEach( mkr=>{
      mkr.setVisible( true );
    }); 
};
const filterSecond=(e)=>console.log('hello world');




document.querySelectorAll('select.usr-select').forEach( n=>n.addEventListener('change',filterMarkers));
document.querySelector('select.usr-second-select').addEventListener('change',filterSecond );

body,
body * {
  box-sizing: border-box;
}
#map {
  width: 800px;
  height: 600px;
  float: none;
  margin: 1rem auto;
}
form {
  width: 800px;
  float: none;
  margin: 1rem auto;
}
select,
[type='text']{
  padding: 0.25rem;
  margin: 0.1rem;
}
option:first-child {
  background: grey;
  color: white;
  font-style:italic;
  text-decoration:underline;
}
.filtered {
  box-shadow: 0 0 1rem rgba(0, 255, 0, 1)
}

<form>
  <select class='usr-select status-multiple' required name='status' multiple='multiple' name='status'>
    <option selected>Status
    <option value='Active'>Aktiv
    <option value='Inactive'>Inaktiv
    <option value='Prospective'>Prospective
  </select>

  <select class='usr-select' name='gymtype'>
    <option selected>Gym type
    <option value='STX'>STX
    <option value='HHX'>HHX
    <option value='HTX'>HTX
    <option value='HF'>HF
    <option value='IB'>IB
    <option value='IBB'>IBB
    <option value='EUX'>EUX
    <option value='EUD'>EUD
    <option value='Foreign high school'>Foreign high school
    <option value='Other'>Other
  </select>

  <select class='usr-select' name='still_gym'>
    <option selected>Gym år
    <option value='1.g'>1.g
    <option value='2.g'>2.g
    <option value='3.g'>3.g
    <option value='Jeg er færdig med gymnasiet'>Færdig
  </select>

  <select class='usr-select' name='gender' class='ui dropdown'>
    <option selected>Gender
    <option value='Mand'>Male
    <option value='Kvinde'>Female
    <option value='Other'>Other  
  </select>

  <select class='usr-select' name='car'>
    <option selected>Adgang til bil
    <option value='Yes'>Ja
    <option value='No'>Nej
  </select>

  <select class='usr-select' name='grade'>
    <option selected>Karakter
    <option value='Under 7'>Under 7
    <option value='7 til 8'>7 til 8
    <option value='8 til 9'>8 til 9
    <option value='9 til 10'>9 til 10
    <option value='10 til 11'>10 til 11
    <option value='11 til 12'>11 til 12
    <option value='Over 12'>Over 12
  </select>

  <select class='usr-select' name='course'>
    <option selected>Online prioriteringer
    <option value='1. prioritet (Bor i mindre by)'>1. prioritet (Bor i mindre by)
    <option value='2. prioritet (Foretrækker online)'>2. prioritet (Foretrækker online)
    <option value='3. prioritet (Bor i større by)'>3. prioritet (Bor i større by)
    <option value='4. prioritet (Foretrækker fysisk)'>4. prioritet (Foretrækker fysisk)
    <option value='5. prioritet (Kan ikke undervise online)'>5. prioritet (Kan ikke undervise online)
  </select>

  <select class='usr-select' name='programs' >
    <option selected>Programmer
    <option value='Excel'>Excel
    <option value='TI-Nspire'>TI-Nspire
    <option value='Geogebra'>Geogebra
    <option value='Wordmat'>Wordmat
    <option value='Maple'>Maple
    <option value='Matlab'>Matlab
    <option value='STATA'>STATA
    <option value='JMP'>JMP
    <option value='R'>R
    <option value='Python'>Python
    <option value='Maple'>Maple
  </select>

  <select class='usr-select' name='fluent_danish'>
    <option selected>Snakker dansk?
    <option value='Yes'>Ja
    <option value='No'>Nej
  </select>

  <select class='usr-select' name='fluent_other'>
    <option selected>Flydende i
    <option value='Engelsk'>English
    <option value='Tsyk'>German
    <option value='Fransk'>French
    <option value='Spansk'>Spanish
    <option value='Arabisk'>Arabic
    <option value='Portugisisk'>Portugesse
    <option value='Russisk'>Russian
    <option value='Japansk'>Japanesse
    <option value='Kinesisk'>Chinesse
    <option value='Persisk'>Persian
    <option value='Italiensk'>Italian
  </select>

  <select class='usr-select' name='more_courses'>
    <option selected>Åben for forløb?
    <option value='Yes'>Ja
    <option value='No'>Nej
  </select>

  <select class='usr-select' name='educational_institution'>
    <option selected>Uddannelsesinstitution
    <option value='Aalborg Universitet'>Aalborg Uni
    <option value='Aarhus Universitet'>Aarhus Uni
    <option value='Absalon Professionshøjskole'>Absalon Professionshøjskole
    <option value='Copenhagen Business Academy'>Copenhagen Business Academy
    <option value='Copenhagen Business School'>Copenhagen Business School
    <option value='Danmarks Tekniske Universitet'>Danmarks Tekniske Uni
    <option value='Danmarks Medie- og Jornalisthøjskole'>DMJX
    <option value='Erhvervsakademi Aarhus'>Erhvervsakademi Aarhus
    <option value='Erhvervsakademi Dania'>Erhvervsakademi Dania
    <option value='Erhvervsakademi Kolding'>Erhvervsakademi Kolding
    <option value='Erhvervsakademi Midtvest'>Erhvervsakademi Midtvest
    <option value='Erhvervsakademi Sydvest'>Erhvervsakademi Sydvest
    <option value='IT-Universitet'>IT-Uni
    <option value='Københavns Universitet'>KU
    <option value='Københavns Professionshøjskole'>Københavns Professionshøjskole
    <option value='Københavns Erhvervsakademi'>Københavns Erhvervsakademi
    <option value='Professionshøjskolen UCN'>Professionshøjskolen
    <option value='Roskilde Universitet'>Roskilde Uni
    <option value='SmartLearning'>SmartLearning
    <option value='Syddansk Universitet'>Syddansk Uni
    <option value='UC Syd'>IT-Uni
    <option value='UCL Erhvervsakademi og Professionshøjskole'>UCL
    <option value='Via University College'>Via University College
    <option value='Zealand'>Zealand
  </select>

  <select class='usr-select' name='age_interval'>
    <option selected>Alder
    <option value='under 18'>Under 18
    <option value='18 til 20'>18 til 20
    <option value='21 til 23'>21 til 23
    <option value='24 til 26'>24 til 26
    <option value='27+'>Over 27
  </select>

  <select class='usr-second-select' name='secondAddress'>
    <option selected>Sekundær adresse
    <option value='hide'>Skjul sekundær adresse  
    <option value='show'>Vis sekundær adresse
  </select>

  <select class='usr-select' name='hour_interval'>
    <option selected>Time interval
    <option value='0 til 2'>0 til 2
    <option value='2 til 10'>2 til 10
    <option value='10 til 50'>10 til 50
    <option value='50 til 100'>50 til 100
    <option value='100+'>Over 100
  </select>

  <select class='usr-select' name='qualification'>
    <option selected>Kvalifikationer
    <option value='Super pædagogisk'>Pædagogisk 
    <option value='Ikke særlig pædagogisk'>Ikke Pædagogisk 
    <option value='Dansk korrektur/grammatik'>Dansk korrektur/gramamtik
    <option value='Engelsk korrektur/grammatik'>Engelsk korrektur/grammatik
    <option value='God til SRP-forløb'>God til SRP-forløb
    <option value='God til sprogundervisning'>God til sprogundervisning
  </select>

  <!--
  
    these had dynamic content - templating engine??
  
  -->
  <select class='usr-select' name='subject'>
    <option selected>Fag
    <!--
      more options...
    -->
  </select>

  <select class='usr-select' name='uni'>
    <option selected>Uni Uddannelser
  </select>

  <select class='usr-select' name='tutor_gym'>
    <option selected>Tutorens gym
  </select>


  <input type='text' name='pac-input' class='controls' placeholder='Søg efter adresse' />
</form>
<div id='map'># MAP #</div>

可以看到利用这种方法的工作示例here

Google 地图标记多 select 问题

Google Maps marker multi-select issue

javascript

html

css

google-maps

multi-select