使用Google Maps API在点击时隐藏标记 [英] Hide Markers on Click with Google Maps API

问题描述

我正在使用Google Maps Javascript V3 API构建搜索表单.我想添加一些过滤器，这些过滤器在单击时会在地图上隐藏某些类型的标记.要隐藏的标记用

I am building a search form using Google Maps Javascript V3 API. I would like to add some filters that will hide certain types of markers on the map when clicked. The markers to hide are represented with

locations[i][11] == 'Other'

HTML:

<a href="#" class="hideOtherMarkers">Hide Other Markers</a>

JavaScript:

var geocoder;
function initialize() {
  geocoder = new google.maps.Geocoder();
  var mapOptions = {
    center: { lat: 48.509532, lng: -122.643852}
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions);
  var locations = <?php echo json_encode($locations_array); ?>;
  var infowindow = new google.maps.InfoWindow();

  var marker, i;

  for (i = 0; i < locations.length; i++) {  
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      animation: google.maps.Animation.DROP,
      map: map
    });

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {

        var content = '';
        infowindow.setContent(content);
        infowindow.open(map, marker);
      }
    })(marker, i));

    google.maps.event.addDomListener(document.getElementsByClassName('hideOtherMarkers')[0], 'click', function() {
        if (locations[i][11] == 'Other') {
            marker.setVisible(false); // maps API hide call
        }
    });

  } 

}

google.maps.event.addDomListener(window, 'load', initialize);

当我单击链接时，没有任何反应，并通过警报进行了验证.我还尝试了google.maps.event.addListener(没有Dom)，但没有成功.

When I click the link nothing fires, verified with alerts. I also tried google.maps.event.addListener (without Dom) with no success.

推荐答案

正如geocodezip所评论的那样，此方法将不起作用，因为i始终指向locations的结尾.此外，这最多会隐藏1个标记(已创建的最后一个标记).

As commented by geocodezip this approach will not work, because i will always point behind the end of locations. Additionally this would hide at best 1 marker (the last marker that has been created).

可能的方法:

将标记的可见状态存储在MVCObject中:

Store the visible-state of the markers in a MVCObject:

地图选项:

var mapOptions = {
    center: { lat: 48.509532, lng: -122.643852}
    //that's the property where we store the state
    visibility:new google.maps.MVCObject
  };

在创建marker之后，在循环内

:

inside the loop, after the creation of marker:

//when the state is not set yet, set it
if(typeof map.get('visibility').get(locations[i][11])==='undefined'){
  map.get('visibility').set(locations[i][11],true);
}
//bind the visible-property of the marker to the state
marker.bindTo('visible',map.get('visibility'),locations[i][11]);

添加侦听器(在循环外部):

add the listener(outside of the loop):

 google.maps.event.addDomListener(
   document.getElementsByClassName('hideOtherMarkers')[0], 
   'click', 
    function() {
       //simply set the desired property of the MVCObject to false
       map.get('visibility').set('Other',false);
    });

演示: http://jsfiddle.net/doktormolle/5L2392mL/

Demo: http://jsfiddle.net/doktormolle/5L2392mL/

这篇关于使用Google Maps API在点击时隐藏标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！