Question

我有一个自定义Google地图，我有3种类型的标记，我希望能够按标记类型过滤并仅显示该类型。如果有人可以请求帮助我将永远感激！我很确定我很接近，但我被卡住了。

<script>
    var map;
    function initMap() {
    map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 14,
        center: new google.maps.LatLng(-33.91721, 151.22630),
        mapTypeId: 'roadmap',
        disableDefaultUI: true
    });

    var iconBase = <?php echo "'/images/markers/'"; ?>;
    var icons = {
        typea: {
            icon: iconBase + 'typea-icon.png'
        },
        typeb: {
            icon: iconBase + 'typeb-icon.png'
        },
        typec: {
            icon: iconBase + 'typec-icon.png'
        }
    };

    function addMarker(feature) {
        var marker = new google.maps.Marker({
            position: feature.position,
            icon: icons[feature.type].icon,
            map: map,
            type: icons
        });
        marker.addListener('click', function() {
            //set zoom level
            map.setZoom(20);
            //center map
            map.setCenter(marker.getPosition());
            alert("Testing");
        });
    }

    filterMarkers = function (getType, feature) {
        alert(type);
        for (var i = 0, feature; feature = features[i]; i++) {
            if(feature.type == getType) {
                feature.setVisible(true);
            } else {
                feature.setVisible(false);
            }
        }
    }

    var features = [
        {
            position: new google.maps.LatLng(-33.91721, 151.22630),
            type: 'typea'
        }, {
            position: new google.maps.LatLng(-33.91539, 151.22820),
            type: 'typeb'
        }, {
            position: new google.maps.LatLng(-33.91747, 151.22912),
            type: 'typec'
        }
    ];

    for (var i = 0, feature; feature = features[i]; i++) {
      addMarker(feature);
    }
}
</script>

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=[MYKEY]&callback=initMap">
</script>

<select id="type" onchange="filterMarkers(this.value);">
    <option value="">All Listings</option>
    <option value="typea">Type 1</option>
    <option value="typeb">Type 2</option>
    <option value="typec">Type 3</option>
</select>

<div id="map_wrapper">
    <div id="map_canvas" class="mapping"></div>
</div>

Answer 1

在filterMarkers()函数的第一行，您正在警告type未定义（应该是getType），这很可能是导致错误的原因。在旁注中，只有一个值被传递给filterMarkers()函数，而feature正在for循环中定义，因此您不需要它作为函数参数。

Answer 2

要显示/隐藏标记，您需要引用google.maps.Marker个对象。创建一个全局数组（比如说markers）并在创建时将标记推到该数组上。

function addMarker(feature) {
  var marker = new google.maps.Marker({
    position: feature.position,
    icon: icons[feature.type].icon,
    map: map,
    type: feature.type
  });
  marker.addListener('click', function() {
    //set zoom level
    map.setZoom(20);
    //center map
    map.setCenter(marker.getPosition());
    alert("Testing");
  });
  markers.push(marker);
}

然后在你的filterMarkers函数中，处理该数组，根据其类型隐藏/显示标记。

filterMarkers = function(getType) {
  console.log(getType);
  for (var i = 0; i < markers.length; i++) {
    if (markers[i].type == getType || getType == "") {
      markers[i].setVisible(true);
    } else {
      markers[i].setVisible(false);
    }
  }
}

proof of concept fiddle

代码段

var map;
var markers = [];

function initMap() {
  map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 14,
    center: new google.maps.LatLng(-33.91721, 151.22630),
    mapTypeId: 'roadmap',
    disableDefaultUI: true
  });

  // var iconBase = <?php echo "'/images/markers/'"; ?>;
  var icons = {
    typea: {
      icon: "http://maps.google.com/mapfiles/ms/micons/blue.png"
    },
    typeb: {
      icon: "http://maps.google.com/mapfiles/ms/micons/green.png"
    },
    typec: {
      icon: "http://maps.google.com/mapfiles/ms/micons/orange.png"
    }
  };

  function addMarker(feature) {
    var marker = new google.maps.Marker({
      position: feature.position,
      icon: icons[feature.type].icon,
      map: map,
      type: feature.type
    });
    marker.addListener('click', function() {
      //set zoom level
      map.setZoom(20);
      //center map
      map.setCenter(marker.getPosition());
      alert("Testing");
    });
    markers.push(marker);
  }

  filterMarkers = function(getType) {
    console.log(getType);
    for (var i = 0; i < markers.length; i++) {
      if (markers[i].type == getType || getType == "") {
        markers[i].setVisible(true);
      } else {
        markers[i].setVisible(false);
      }
    }
  }

  var features = [{
    position: new google.maps.LatLng(-33.91721, 151.22630),
    type: 'typea'
  }, {
    position: new google.maps.LatLng(-33.91539, 151.22820),
    type: 'typeb'
  }, {
    position: new google.maps.LatLng(-33.91747, 151.22912),
    type: 'typec'
  }];

  for (var i = 0, feature; feature = features[i]; i++) {
    addMarker(feature);
  }
}
google.maps.event.addDomListener(window, "load", initMap);

html,
body,
#map_wrapper,
#map_canvas {
  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="">All Listings</option>
  <option value="typea">Type 1</option>
  <option value="typeb">Type 2</option>
  <option value="typec">Type 3</option>
</select>

<div id="map_wrapper">
  <div id="map_canvas" class="mapping"></div>
</div>

按图标类型过滤地图标记

2 个答案: