javascript - setVisible 不适用于 <option>

Question

我有代码，我想使用带有类别的 setVisible 显示标记。但我的代码不起作用...知道吗？我使用 PHP 和 mysql 来保存数据标记。

HTML 代码

<select id="type" onchange="filterMarkers(this.value);">
    <option value="">Please select category</option>
    <option value="lawyer">second</option>
    <option value="marker">car</option>
    <option value="third">third</option>
</select>


    <div id="ss-container" class="ss-container">
    <div id="map_canvas">
    <div id="map">

javascript 我的 map 和来自 mysql 的数据

var locations = [
    <?php 
    $query="SELECT * from locations";
    $result=mysql_query($query);
        { 
        if ($num=mysql_numrows($result)) {
    $i=0;
    while ($i < $num) {
    $id=mysql_result($result,$i,"id");
    $title=mysql_result($result,$i,"title");
    $lapt=mysql_result($result,$i,"lapt");
    $long=mysql_result($result,$i,"long");
    $aimage=mysql_result($result,$i,"aimage");
    $categoryid=mysql_result($result,$i,"categoryid");
    $address=mysql_result($result,$i,"address");
    echo "['<div class=info><h4>$title</h4><br><h5>$address</h5><br><img src=$aimage><br></div>', $lapt, $long,'$categoryid'],";
    $i++;
    }
    }
    else 
    {
    echo "<h3 align='center'><font color='#ff0000'>No Content Found</font></h3>";
    }
    }
    ?>
        ];

        // Setup the different icons and shadows
        var iconURLPrefix = 'images/';

        var icons = {}
          icons['lawyer'] = iconURLPrefix + 'lawyer.png';
          icons['marker'] = iconURLPrefix + 'marker4.png';

        var icons_length = icons.length;


        var shadow = {
          anchor: new google.maps.Point(5,13),
          url: iconURLPrefix + 'msmarker.shadow.png'
        };
var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 9,
          center: new google.maps.LatLng(40.715618, -74.011133),
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          mapTypeControl: true,
          streetViewControl: true,
          disableDefaultUI: true,
          panControl: true,
          zoomControl: true,
          zoomControlOptions: {
          position: google.maps.ControlPosition.LEFT_TOP},

        });

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


        var marker;
        var markers = new Array();
        var category = locations[i][3];

        // Add the markers and infowindows to the map
        for (var i = 0; i < locations.length; i++) {  
          marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map,
            category: category,
            icon : icons[locations[i][3]],
            shadow: shadow
          });

          markers.push(marker);

          google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
              infowindow.setContent(locations[i][0]);
              infowindow.open(map, marker);
            }
          })(marker, i));             
        }

这是我的函数类别代码

filterMarkers = function (category) {
            for (i = 0; i < marker.length; i++) {
                marker1 = markers[i];
                // If is same category or category not picked
                if (marker1.category == category || category.length === 0) {
                    marker1.setVisible(true);
                }
                // Categories don't match 
                else {
                    marker1.setVisible(false);
                }
            }
        }

Answer 1

您的过滤器标记函数中有一个拼写错误:for循环索引检查中的marker应该是markers:

var filterMarkers = function(category) {
  for (i = 0; i < markers.length; i++) {
    marker1 = markers[i];
    // If is same category or category not picked
    if (marker1.category == category || category.length === 0) {
      marker1.setVisible(true);
    }
    // Categories don't match 
    else {
      marker1.setVisible(false);
    }
  }
}

代码片段:

var locations = [
  // New York, NY, USA (40.7127837, -74.00594130000002)
  // Newark, NJ, USA (40.735657, -74.1723667)
  // Philadelphia, PA, USA (39.9525839, -75.16522150000003)
  // Baltimore, MD, USA (39.2903848, -76.61218930000001)

  ['<div class=info><h4>t</h4><br><h5>New York, NY, USA</h5><br><img src=$aimage><br></div>', 40.7127837, -74.0059413, 'lawyer'],
  ['<div class=info><h4>t</h4><br><h5>Newark, NJ, USA</h5><br><img src=$aimage><br></div>', 40.735657, -74.1723667, 'marker'],
  ['<div class=info><h4>t</h4><br><h5>Philadelphia, PA, USA</h5><br><img src=$aimage><br></div>', 39.9525839, -75.1652215, 'lawyer'],
  ['<div class=info><h4>t</h4><br><h5>Baltimore, MD</h5><br><img src=$aimage><br></div>', 39.2903848, -76.6121893, 'third'],
];
// Setup the different icons and shadows
var iconURLPrefix = 'images/';

var icons = {}
icons['lawyer'] = 'http://maps.google.com/mapfiles/ms/micons/blue.png';
icons['marker'] = 'http://maps.google.com/mapfiles/ms/micons/green.png';

var icons_length = icons.length;


var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 9,
  center: new google.maps.LatLng(40.715618, -74.011133),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

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


var marker;
var markers = new Array();

// Add the markers and infowindows to the map
for (var i = 0; i < locations.length; i++) {
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    category: locations[i][3],
    icon: icons[locations[i][3]]
  });

  markers.push(marker);

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}
var filterMarkers = function(category) {
  for (i = 0; i < markers.length; i++) {
    marker1 = markers[i];
    // If is same category or category not picked
    if (marker1.category == category || category.length === 0) {
      marker1.setVisible(true);
    }
    // Categories don't match 
    else {
      marker1.setVisible(false);
    }
  }
}

html,
body,
#map,
#ss-container {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<select id="type" onchange="filterMarkers(this.value);">
  <option value="">Please select category</option>
  <option value="lawyer">second</option>
  <option value="marker">car</option>
  <option value="third">third</option>
</select>


<div id="ss-container" class="ss-container">
  <div id="map"></div>
</div>