проблема фильтрации значков маркеров в Google Maps API v3 - PullRequest
Новая
       19

проблема фильтрации значков маркеров в Google Maps API v3

0 голосов
/ 29 июня 2018

Я пытаюсь отфильтровать значки на карте Google в соответствии с выбранным направлением ветра. В этом простом примере у меня всего два маркера (Bowers и Slaughter), пользователь должен выбрать направление ветра из выпадающего списка выбора, и один из двух запусков (Bowers) должен быть отфильтрован, если направление северного ветра выбран. Я построил функцию 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>

 ```

1 Ответ

0 голосов
/ 29 июня 2018

При использовании браузера Contsole (Contrl-Shift-J), он сказал, что переменная markerBowers не определена вне функции карты. Поэтому я определил его вне функции карты, а не внутри, чтобы она была глобальной, и вот, все работает, как я планировал, и маркер Bowers исчезает при выборе северного ветра. Поэтому я хочу отменить этот вопрос.

...