Question

我正在尝试根据选定的风向过滤Google地图上的图标。在这个简单的示例中，我总共有两个标记（风机和屠宰），用户将从下拉选择列表中选择一个风向，如果北风向，则要过滤掉两个发射器之一（风机）被选中。我在代码的末尾构建了filterFunction，尽管它可以正确读取所选的风向并显示警报，但它不会使Bowers标记消失。另外，如果我切换警报和设置的可见代码行，则根本不会出现警报语句，这可能是因为程序挂在了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>

 ```

Answer 1

使用浏览器控制台（contrl-shift-j）时，它表示变量markerBowers在map函数外部未定义。因此，我将其定义在map函数之外，而不是在map函数中，这样它才是全局的，而且很长很长，所有的东西都按我的意图工作，并且Bowers标记在选择北风时消失了。因此，我希望取消此问题。

在Google Maps API v3中过滤图标标记时遇到麻烦

1 个答案: