在谷歌地图 api v3 中过滤图标标记时遇到问题答案

【问题标题】：trouble filtering icon markers in google maps api v3在谷歌地图 api v3 中过滤图标标记时遇到问题
【发布时间】：2018-06-28 22:49:49
【问题描述】：

我正在尝试根据选定的风向过滤谷歌地图上的图标。在这个简单的例子中，我总共有两个标记（Bowers 和 Slaughter），用户要从下拉选择列表中选择一个风向，如果北风向，两个发射（Bowers）之一将被过滤掉被选中。我在代码末尾构建了 filterFunction，虽然它正确读取了所选风向并显示警报，但它不会使 Bowers 标记按我的意图消失。另外，如果我切换 alert 和 set Visible 的代码行，alert 语句根本不会出现，可能是因为程序挂在 setVisible 语句上。

请告诉我如何让我的过滤器工作。

谢谢。

代码是： ```

 <!DOCTYPE html>
 <html>
 <body>
 <select id="windDir" type="text" onchange="filterFunction()">
 <option value="all">any all</option>
<option value="North">N</option>
<option value="Northeast">NE</option>
<option value="East">E</option>
 <option value="Southeast">SE</option>
<option value="South">S</option>
<option value="Southwest">SW</option>
 <option value="West">W</option>     
<option value="Northwest">NW</option>    

</select>   

<h1>Delmarva Windsurf Launches</h1>


<div id="googleMap" style="width:65%;height:1300px;"></div>

 <script>
 function myMap() {

var posSlaughter = {lat: 38.914, lng: -75.304};
var posBowers = {lat: 39.062, lng: -75.397};

  var mapProp= {
center:new google.maps.LatLng(38.1742, -75.520850),
zoom:9,
mapTypeId: google.maps.MapTypeId.HYBRID,
  };
  var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); 




  var markerSlaughter = new google.maps.Marker({
  position: posSlaughter,
  label: {
    color: 'pink',
    fontWeight: 'bold',
    text: "Slaughter Beach",
  },
    icon: {

      url: 'windsurfing5a.png',  
        labelOrigin: new google.maps.Point(85, 15),
         origin: new google.maps.Point(0, 0),
    },
  map: map,

  }

  );

   google.maps.event.addListener(markerSlaughter, 'click', function() {
   window.open("http://windsurfresource.com/slaughter.htm");      

  });        

  var markerBowers = new google.maps.Marker({
  position: posBowers,
  label: {
    color: 'pink',
    fontWeight: 'bold',
    text: "Bowers Beach",
    },
    icon: {

      url: 'windsurfing5a.png',  
        labelOrigin: new google.maps.Point(80, 15),
         origin: new google.maps.Point(0, 0),
    },
    map: map,

   }

   );

   google.maps.event.addListener(markerBowers, 'click', function() {
   window.open("http://windsurfresource.com/bowers.htm");     


 });   


  }


  function filterFunction() {
   var x = document.getElementById("windDir").value;
    if (x == "North") {   
            alert("north is selected");   
        markerBowers.setVisible(false);

      }

   } 


  </script>

  <script src="https://maps.googleapis.com/maps/api/js?key=
  KEY STRICKEN OUT HERE"></script>
  <!--
  To use this code on your website, get a free API key from Google.
  Read more at: https://www.w3schools.com/graphics/google_maps_basic.asp
  -->

  </body>
  </html>

 ```

【问题讨论】：

标签： api google-maps filter icons marker

【解决方案1】：

在使用浏览器控制台 (contrl-shift-j) 时，它表示变量 markerBowers 在 map 函数之外是未定义的。因此，我将它定义在地图函数之外而不是内部，因此它是全局的，并且长期看，一切都按我的预期工作，并且鲍尔斯标记在选择北风时消失。所以我想取消这个问题。

【讨论】：