谷歌地图标记上的选择选项不起作用

Question

我想为组标记谷歌地图做一个选择选项，但选项选择不起作用。

这是我的 JavaScript，也可以在 CodePen 上使用 select 选项方法来选择分组标记集：

var gmarkers1 = [];
var markers1 = [];
var infowindow = new google.maps.InfoWindow({
  content: ''
});

// init map
function initialize() {
  var center = new google.maps.LatLng(-6.121435, 106.774124);
  var styles = [{
    "stylers": [{
      "saturation": -80
    }, {
      "gamma": 2
    }]
  }, {
    "featureType": "water",
    "stylers": [{
      "lightness": -15
    }]
  }];
  var styledMap = new google.maps.StyledMapType(styles, {
    name: "EDC"
  });
  var mapOptions = {
    scrollwheel: false,
    zoom: 4,
    center: center,
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
    }
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  map.mapTypes.set('map_style', styledMap);
  map.setMapTypeId('map_style');

  var url = "https://api.myjson.com/bins/u0aos";

  $.getJSON(url, function(markers1) {
    $.each(markers1, function(key, marker) {
      addMarker(marker)
    });
  });
}

/*   markers1 = "/edclistapps/map_list";
  $.getJSON(markers1, function (markers1) {
      for (i = 0; i < markers1.length; i++) {
          addMarker(markers1[i]);
      }
  });

} */

// add markers to map
function addMarker(marker) {
  var category = marker[4];
  var title = marker[3];
  var pos = new google.maps.LatLng(marker[8], marker[9]);
  var content = marker[3];
  var city = marker[6];
  var myIcon = 'http://ruralshores.com/assets/marker-icon.png';

  marker1 = new google.maps.Marker({
    title: title,
    position: pos,
    category: category,
    map: map,
    icon: myIcon
  });
  gmarkers1.push(marker1);

  // marker click listener
  google.maps.event.addListener(marker1, 'click', (function(marker1, content) {
    return function() {
      console.log('Gmarker 1 gets pushed');
      infowindow.setContent(content);
      //  infowindow.setContent(city);
      infowindow.open(map, marker1);
      // map.panTo(this.getPosition()); // pan to lat/long of map marker
      map.setZoom(12);
    }
  })(marker1, content));
}

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

// Init map
initialize();

请帮助我使此代码正常工作。我试过很多次了。

Answer 1

您的代码中有错字：

for (i = 0; i < markers1.length; i++) {

应该是（markers1 数组没有被使用，它是空的；gmarkers1 数组中有你的标记）：

for (i = 0; i < gmarkers1.length; i++) {

proof of concept fiddle

代码 sn-p：

// filter markers by category
filterMarkers = function(category) {
  for (i = 0; i < gmarkers1.length; i++) {
    marker = gmarkers1[i];
    // If is same category or category not picked
    if (marker.category == category || category.length === 0) {
      marker.setVisible(true);
    }
    // categories don't match 
    else {
      marker.setVisible(false);
    }
  }
}
var gmarkers1 = [];
var map;
var infowindow = new google.maps.InfoWindow({
  content: ''
});

// init map
function initialize() {
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  map.mapTypes.set('map_style', styledMap);
  map.setMapTypeId('map_style');

  var url = "https://api.myjson.com/bins/u0aos";

  $.getJSON(url, function(markers1) {
    $.each(markers1, function(key, marker) {
      addMarker(marker)
    });
  });
}

// add markers to map
function addMarker(marker) {
  var category = marker[4];
  var title = marker[3];
  var pos = new google.maps.LatLng(marker[8], marker[9]);
  var content = marker[3];
  var city = marker[6];
  // must be on https to display on stackoverflow code snippet
  var myIcon = 'https://maps.google.com/mapfiles/ms/icons/blue.png';

  marker1 = new google.maps.Marker({
    title: title,
    position: pos,
    category: category,
    map: map,
    icon: myIcon
  });
  gmarkers1.push(marker1);

  // marker click listener
  google.maps.event.addListener(marker1, 'click', (function(marker1, content) {
    return function() {
      console.log('Gmarker 1 gets pushed');
      infowindow.setContent(content);
      infowindow.open(map, marker1);
      map.setZoom(12);
    }
  })(marker1, content));
}

var styles = [{
  "stylers": [{
    "saturation": -80
  }, {
    "gamma": 2
  }]
}, {
  "featureType": "water",
  "stylers": [{
    "lightness": -15
  }]
}];
var center = new google.maps.LatLng(-6.121435, 106.774124);
var styledMap = new google.maps.StyledMapType(styles, {
  name: "EDC"
});
var mapOptions = {
  scrollwheel: false,
  zoom: 4,
  center: center,
  mapTypeControlOptions: {
    mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
  }
};

// Init map
initialize();

html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

#map-canvas {
  height: 90%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<select onchange="filterMarkers(this.value);">
  <option value="">select</option>
  <option value="BAKMI GM">BAKMI GM</option>
  <option value="CHATIME">CHATIME</option>
  <option value="PUYO">PUYO</option>
  <option value="GANCIT EVENT">GANCIT EVENT</option>
</select>
<div id="map-canvas"></div>