Google地图：按类别显示的标记

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");

proof of concept fiddle（没有使用您的数据，因为您没有提供任何数据，使用来自a Google Example的示例）

代码段

＆＃13;

＆＃13;

var map;
var customIcons = {
  restaurant: {
    icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png'
  },
  bar: {
    icon: 'http://labs.google.com/ridefinder/images/mm_20_red.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>';

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;