谷歌地图:按类别激活的标记

Question

我有一些类别，比如咖啡、购物和学校。当我加载页面时，我该怎么做？类别coffe是活动的，所有标记和所有其他类别都要隐藏。。。

这是我的密码。

        function load() {
            var map = new google.maps.Map(document.getElementById("map"), {
                center: new google.maps.LatLng(47.059516, 21.947613),
                zoom: 13,
                scrollwheel: false,
                mapTypeId: 'roadmap'
            });
            var infoWindow = new google.maps.InfoWindow();
            // Change this depending on the name of your PHP file
            downloadUrl("googlemaps/phpsqlajax_genxml2.php", function (data) {
                var xml = data.responseXML;
                var markers = xml.documentElement.getElementsByTagName("marker");
                for (var i = 0; i < markers.length; i++) {
                    var id_marker = markers[i].getAttribute("id_marker");
                    var name = markers[i].getAttribute("name");
                    var category = markers[i].getAttribute("category");
                    var address = markers[i].getAttribute("address");
                    var img = markers[i].getAttribute("img");
                    var phone = markers[i].getAttribute("phone");
                    var schedule = markers[i].getAttribute("schedule");
                    var link = markers[i].getAttribute("link");
                    document.getElementById('categorii').src = img;
                    var type = markers[i].getAttribute("type");
                    var point = new google.maps.LatLng(
                            parseFloat(markers[i].getAttribute("lat")),
                            parseFloat(markers[i].getAttribute("lng")));
                    var html = "<u class='title-google-maps'>" + name + "</u> <p class='google-maps'>" + category + "</p>" + address + "<p class='google-maps'>" + phone + "</p>" + "<p class='google-maps-2'>" + schedule + "</p>" + link ;
                    var icon = customIcons[type] || {};
                    var marker = new google.maps.Marker({
                        map: map,
                        position: point,
                        icon: icon.icon,
                        id_marker: id_marker,
                        image: img,
                        type: type
                    });
                    markerGroups[type].push(marker);

                    marker.setVisible(false);
                    bindInfoWindow(marker, map, infoWindow, html);
                }
            });
        }

        function toggleGroup(type) {
            for (var i = 0; i < markerGroups[type].length; i++) {
                var marker = markerGroups[type][i];
                if (!marker.getVisible()) {
                    marker.setVisible(true);

                } else {
                     marker.setVisible(false);
                }

            }
        }

        function bindInfoWindow(marker, map, infoWindow, html) {
            google.maps.event.addListener(marker, 'click', function () {
                infoWindow.setContent(html);
                infoWindow.open(map, marker);

                document.getElementById('categorii').src = marker.image;
            });
        }
        function downloadUrl(url, callback) {
            var request = window.ActiveXObject ?
                    new ActiveXObject('Microsoft.XMLHTTP') :
                    new XMLHttpRequest;
            request.onreadystatechange = function () {
                if (request.readyState == 4) {
                    request.onreadystatechange = doNothing;
                    callback(request, request.status);
                }
            };
            request.open('GET', url, true);
            request.send(null);
        }
        function doNothing() {
        }

Answer 1

由于默认标记为不可见（marker.setVisible(false);），因此在显示标记后，对想要可见的标记调用toggleGroup。

toggleGroup("coffe");

概念验证fiddle（不使用您的数据，因为您没有提供任何数据，使用谷歌示例中的样本）

代码片段：

var map;
var customIcons = {
  restaurant: {
    icon: 'http://maps.google.com/mapfiles/ms/micons/blue.png'
  },
  bar: {
    icon: 'http://maps.google.com/mapfiles/ms/micons/green.png'
  }
};
var markerGroups = [];
function load() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(47.059516, 21.947613),
    zoom: 13,
    scrollwheel: false,
    mapTypeId: 'roadmap'
  });
  var infoWindow = new google.maps.InfoWindow();
  // Change this depending on the name of your PHP file
  // downloadUrl("googlemaps/phpsqlajax_genxml2.php", function(data) {
  //var xml = data.responseXML;
  var bounds = new google.maps.LatLngBounds();
  var xml = parseXml(sampleXmlData);
  var markers = xml.documentElement.getElementsByTagName("marker");
  for (var i = 0; i < markers.length; i++) {
    var id_marker = markers[i].getAttribute("id_marker");
    var name = markers[i].getAttribute("name");
    var category = markers[i].getAttribute("category");
    var address = markers[i].getAttribute("address");
    var img = markers[i].getAttribute("img");
    var phone = markers[i].getAttribute("phone");
    var schedule = markers[i].getAttribute("schedule");
    var link = markers[i].getAttribute("link");
    document.getElementById('categorii').src = img;
    var type = markers[i].getAttribute("type");
    var point = new google.maps.LatLng(
      parseFloat(markers[i].getAttribute("lat")),
      parseFloat(markers[i].getAttribute("lng")));
    bounds.extend(point);
    var html = "<u class='title-google-maps'>" + name + "</u> <p class='google-maps'>" + category + "</p>" + address + "<p class='google-maps'>" + phone + "</p>" + "<p class='google-maps-2'>" + schedule + "</p>" + link;
    var icon = customIcons[type] || {};
    var marker = new google.maps.Marker({
      map: map,
      position: point,
      icon: icon.icon,
      id_marker: id_marker,
      image: img,
      type: type
    });
    if (!markerGroups[type]) markerGroups[type] = [];
    markerGroups[type].push(marker);
    marker.setVisible(false);
    bindInfoWindow(marker, map, infoWindow, html);
  }
  // });
  map.fitBounds(bounds);
  toggleGroup("bar");
  google.maps.event.addDomListener(document.getElementById('barbtn'), 'click', function() {
    toggleGroup("bar")
  });
  google.maps.event.addDomListener(document.getElementById('restaurantbtn'), 'click', function() {
    toggleGroup("restaurant")
  });
}
google.maps.event.addDomListener(window, 'load', load);
function toggleGroup(type) {
  for (var i = 0; i < markerGroups[type].length; i++) {
    var marker = markerGroups[type][i];
    if (!marker.getVisible()) {
      marker.setVisible(true);
    } else {
      marker.setVisible(false);
    }
  }
}
function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
    document.getElementById('categorii').src = marker.image;
  });
}
function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
    new ActiveXObject('Microsoft.XMLHTTP') :
    new XMLHttpRequest;
  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request, request.status);
    }
  };
  request.open('GET', url, true);
  request.send(null);
}
function doNothing() {}
function parseXml(str) {
  if (window.ActiveXObject) {
    var doc = new ActiveXObject('MicrosoftXMLDOM');
    doc.loadXML(str);
    return doc;
  } else if (window.DOMParser) {
    return (new DOMParser()).parseFromString(str, 'text/xml');
  }
}
var sampleXmlData = '<markers><marker name="Pan Africa Market" address="1521 1st Ave, Seattle, WA" lat="47.608940" lng="-122.340141" type="restaurant"/><marker name="Buddha Thai &amp; Bar" address="2222 2nd Ave, Seattle, WA" lat="47.613590" lng="-122.344391" type="bar"/><marker name="The Melting Pot" address="14 Mercer St, Seattle, WA" lat="47.624561" lng="-122.356445" type="restaurant"/><marker name="Ipanema Grill" address="1225 1st Ave, Seattle, WA" lat="47.606365" lng="-122.337654" type="restaurant"/><marker name="Sake House" address="2230 1st Ave, Seattle, WA" lat="47.612823" lng="-122.345673" type="bar"/><marker name="Crab Pot" address="1301 Alaskan Way, Seattle, WA" lat="47.605961" lng="-122.340363" type="restaurant"/><marker name="Mama&apos;s Mexican Kitchen" address="2234 2nd Ave, Seattle, WA" lat="47.613976" lng="-122.345467" type="bar"/><marker name="Wingdome" address="1416 E Olive Way, Seattle, WA" lat="47.617214" lng="-122.326584" type="bar"/><marker name="Piroshky Piroshky" address="1908 Pike pl, Seattle, WA" lat="47.610126" lng="-122.342834" type="restaurant"/></markers>';

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

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<input type="button" value="bar" id="barbtn" />
<input type="button" value="restaurant" id="restaurantbtn" />
<div id="map"></div>
<img id="categorii" />