使用地图过滤器更新Google地图中的群集标记(Update clustered markers in Google Map with map filters)

我只是创建一个带有标记的谷歌地图和一个选择按类别过滤这些标记

#map-canvas { width: 500px; height: 500px; } <script src="https://maps.googleapis.com/maps/api/js?key=&v=3.0&sensor=true&language=ee&dummy=dummy.js"></script> <div id="map-canvas"></div> <select id="type" onchange="filterMarkers(this.value);"> <option value="">Please select category</option> <option value="second">second</option> <option value="car">car</option> <option value="third">third</option> </select>

和js：

我正在尝试使用MarkerClusterer函数聚类标记。所以我添加了如下所示：

现在这很有用。然而，标记被分组，当我按类别过滤时，群集不会更新。我试过阅读一些关于repaint（）函数的教程，但我可以解决它。

I just create a google map with markers and a select to filter those markers by category

#map-canvas { width: 500px; height: 500px; } <script src="https://maps.googleapis.com/maps/api/js?key=&v=3.0&sensor=true&language=ee&dummy=dummy.js"></script> <div id="map-canvas"></div> <select id="type" onchange="filterMarkers(this.value);"> <option value="">Please select category</option> <option value="second">second</option> <option value="car">car</option> <option value="third">third</option> </select>

and the js:

I'm trying to cluster markers using the MarkerClusterer function. So I added as is shown here:

Now this works greats. Markers are grouped, however, when I filter by category, the clusters are not updated. I have tried to read some tutorials about the repaint() function but I can solve it.

最满意答案

如果你清除MarkerClusterer（ MarkerCluster.clearMarkers() ），然后重新添加你想要的那些，它适用于我。

filterMarkers = function(category) { var newmarkers = []; 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) { newmarkers.push(marker); } } markerCluster.clearMarkers(); markerCluster.addMarkers(newmarkers); }

概念证明小提琴

代码段：

/**
 * Function to init map
 */
function initialize() {
  var center = new google.maps.LatLng(52.4357808, 4.991315699999973);
  var mapOptions = {
    zoom: 12,
    center: center,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  for (i = 0; i < markers1.length; i++) {
    addMarker(markers1[i]);
  }
  markerCluster = new MarkerClusterer(map, gmarkers1, {
    imagePath: 'https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m'
  });
}

/**
 * Function to add marker to map
 */
function addMarker(marker) {
  var category = marker[4];
  var title = marker[1];
  var pos = new google.maps.LatLng(marker[2], marker[3]);
  var content = marker[1];

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

  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.panTo(this.getPosition());
      map.setZoom(15);
    }
  })(marker1, content));
}

/**
 * Function to filter markers by category
 */
filterMarkers = function(category) {
  var newmarkers = [];
  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) {
      newmarkers.push(marker);
    }
  }
  markerCluster.clearMarkers();
  markerCluster.addMarkers(newmarkers);
}
google.maps.event.addDomListener(window, "load", initialize);

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

// Our markers
markers1 = [
  ['0', 'Title 1', 52.4357808, 4.991315699999973, 'car'],
  ['1', 'Title 2', 52.4357808, 4.981315699999973, 'third'],
  ['2', 'Title 3', 52.4555687, 5.039231599999994, 'car'],
  ['3', 'Title 4', 52.4555687, 5.029231599999994, 'second']
]; 
  body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
#map-canvas {
  width: 100%;
  height: 95%;
} 
  <script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>
<select id="type" onchange="filterMarkers(this.value);">
  <option value="">Please select category</option>
  <option value="second">second</option>
  <option value="car">car</option>
  <option value="third">third</option>
</select> 
  
 
If you clear out the MarkerClusterer (MarkerCluster.clearMarkers()), then re-add the ones that you want visible, it works for me. 
filterMarkers = function(category) {
  var newmarkers = [];
  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) {
      newmarkers.push(marker);
    }
  }
  markerCluster.clearMarkers();
  markerCluster.addMarkers(newmarkers);
}
 
proof of concept fiddle 
code snippet: 
 
 
  
  /**
 * Function to init map
 */
function initialize() {
  var center = new google.maps.LatLng(52.4357808, 4.991315699999973);
  var mapOptions = {
    zoom: 12,
    center: center,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  for (i = 0; i < markers1.length; i++) {
    addMarker(markers1[i]);
  }
  markerCluster = new MarkerClusterer(map, gmarkers1, {
    imagePath: 'https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m'
  });
}

/**
 * Function to add marker to map
 */
function addMarker(marker) {
  var category = marker[4];
  var title = marker[1];
  var pos = new google.maps.LatLng(marker[2], marker[3]);
  var content = marker[1];

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

  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.panTo(this.getPosition());
      map.setZoom(15);
    }
  })(marker1, content));
}

/**
 * Function to filter markers by category
 */
filterMarkers = function(category) {
  var newmarkers = [];
  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) {
      newmarkers.push(marker);
    }
  }
  markerCluster.clearMarkers();
  markerCluster.addMarkers(newmarkers);
}
google.maps.event.addDomListener(window, "load", initialize);

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

// Our markers
markers1 = [
  ['0', 'Title 1', 52.4357808, 4.991315699999973, 'car'],
  ['1', 'Title 2', 52.4357808, 4.981315699999973, 'third'],
  ['2', 'Title 3', 52.4555687, 5.039231599999994, 'car'],
  ['3', 'Title 4', 52.4555687, 5.029231599999994, 'second']
]; 
  body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
#map-canvas {
  width: 100%;
  height: 95%;
} 
  <script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-canvas"></div>
<select id="type" onchange="filterMarkers(this.value);">
  <option value="">Please select category</option>
  <option value="second">second</option>
  <option value="car">car</option>
  <option value="third">third</option>
</select>

更多推荐