Google地图标记和多个类别的过滤标记

Question

我有一个设置，允许我根据打开和关闭的复选框成功过滤Google地图中的标记。虽然我的新挑战是某些标记属于多个类别，但我的设置不正确。我正在学习，但这似乎有点超出我的意义。如何修改我的设置以仅使用过滤器将每个标记限制为1个类别？每个标记最多可能属于5个类别，如果选中任何相应的复选框，则需要显示。感谢您对此提供任何可能的帮助。

我的JS是：

  < script type = "text/javascript" >
   //<![CDATA[
   if (GBrowserIsCompatible()) {
       var gmarkers = [];
       var gicons = [];
       var baseIcon = new GIcon(G_DEFAULT_ICON);
       baseIcon.iconAnchor = new GPoint(9, 34);
       baseIcon.iconSize = new GSize(20, 34);
       baseIcon.infoWindowAnchor = new GPoint(9, 2);
       //gicons["theatre"] = new GIcon(baseIcon,"colour086.png");
       //gicons["golf"] = new GIcon(baseIcon,"colour108.png");
       // gicons["info"] = new GIcon(baseIcon,"colour125.png");
       // A function to create the marker and set up the event window

       function createMarker(point, name, html, category) {
           var marker = new GMarker(point, gicons[category]);
           // === Store the category and name info as a marker properties ===
           marker.mycategory = category;
           marker.myname = name;
           GEvent.addListener(marker, "click", function () {
               marker.openInfoWindowHtml(html);
           });
           gmarkers.push(marker);
           return marker;
       }
       // == shows all markers of a particular category, and ensures the checkbox is checked ==

       function show(category) {
           for (var i = 0; i < gmarkers.length; i++) {
               if (gmarkers[i].mycategory == category) {
                   gmarkers[i].show();
               }
           }
           // == check the checkbox ==
           document.getElementById(category + "box").checked = true;
       }
       // == hides all markers of a particular category, and ensures the checkbox is cleared ==

       function hide(category) {
           for (var i = 0; i < gmarkers.length; i++) {
               if (gmarkers[i].mycategory == category) {
                   gmarkers[i].hide();
               }
           }
           // == clear the checkbox ==
           document.getElementById(category + "box").checked = false;
           // == close the info window, in case its open on a marker that we just hid
           map.closeInfoWindow();
       }
       // == a checkbox has been clicked ==

       function boxclick(box, category) {
           if (box.checked) {
               show(category);
           }
           else {
               hide(category);
           }
           // == rebuild the side bar
           makeSidebar();
       }

       function myclick(i) {
           GEvent.trigger(gmarkers[i], "click");
       }
       // == rebuilds the sidebar to match the markers currently displayed ==

       function makeSidebar() {
           var html = "";
           for (var i = 0; i < gmarkers.length; i++) {
               if (!gmarkers[i].isHidden()) {
                   html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].myname + '<\/a><br>';
               }
           }
           document.getElementById("side_bar").innerHTML = html;
       }
       // create the map
       var map = new GMap2(document.getElementById("map_canvas"));
       map.addControl(new GLargeMapControl());
       map.addControl(new GMapTypeControl());
       map.setCenter(new GLatLng(40.734953, -73.86775399999999), 8);
       // Read the data
       GDownloadUrl("/locator/testxml/11106/5000", function (doc) {
           var xmlDoc = GXml.parse(doc);
           var markers = xmlDoc.documentElement.getElementsByTagName("marker");
           for (var i = 0; i < markers.length; i++) {
               // obtain the attribues of each marker
               var lat = parseFloat(markers[i].getAttribute("lat"));
               var lng = parseFloat(markers[i].getAttribute("lng"));
               var point = new GLatLng(lat, lng);
               var address = markers[i].getAttribute("address");
               var name = markers[i].getAttribute("name");
               var html = "<b>" + name + "<\/b><p>" + address;
               var category = markers[i].getAttribute("category");
               // create the marker
               var marker = createMarker(point, name, html, category);
               map.addOverlay(marker);
           }
           // == show or hide the categories initially ==
           show("young_men");
           show("juniors");
           show("girls");
           show("boys");
           show("toddler");
           // == create the initial sidebar ==
           makeSidebar();
       });
   }
   else {
       alert("Sorry, the Google Maps API is not compatible with this browser");
   }
   //]]>
    < /script>

然后HTML看起来像这样：

<form id="geofinder_form" method="post" action="index.php"  >
  </div>
  <div class="form-line">
    <div class="form-checkbox">
      <input type = "checkbox" id="young_menbox" onclick="boxclick(this,'young_men')" />
      <span>Young Men's</span></div>
    <div class="form-checkbox">
      <input type = "checkbox" id="juniorsbox" onclick="boxclick(this,'juniors')" />
      <span>Junior's</span></div>
    <div class="form-checkbox">
      <input type = "checkbox" id="girlsbox" onclick="boxclick(this,'girls')" />
      <span>Girls</span></div>
    <div class="form-checkbox">
      <input type = "checkbox" id="boysbox" onclick="boxclick(this,'boys')" />
      <span>Boys</span></div>
    <div class="form-checkbox">
      <input type = "checkbox" id="toddlerbox" onclick="boxclick(this,'toddler')" />
      <span>Toddler/Infant</span></div>
  </div>
  <div class="form-line">
    <div class="form-input"><span>Zip-code</span>
      <input type="text" class="zipcode" name="geoquery" onblur="if (!this.value) this.value = 'Zipcode'" onclick="this.value = ''" value="Zipcode" />
    </div>
    <div class="form-miles">
      <select name="radius" id="select-radius" style="width:200px;">
        <option value="5">Radius</option>
        <option value="5">5 miles</option>
        <option value="10">10 miles</option>
        <option value="15">15 miles</option>
        <option value="20">20 miles</option>
        <option value="100">25 + miles</option>
      </select>
    </div>
  </div>
  <br clear="all" />
  <button class="small-button" type="submit">SEARCH!</button>
</form>

这是用于显示标记的XML文件的片段：

<markers>
<marker name="Sample Store Name" address="92-59 59th, City, ST 11109" lng="-73.86775399999999" lat="40.734953" category="young_men"/>
</markers>

Answer 1

假设示例商店名称标记属于以下类别：年轻人和青少年。 XML文件可以更新如下：

<markers> <marker name="Sample Store Name" address="92-59 59th, City, ST 11109" lng="-73.86775399999999" lat="40.734953" category="young_men,juniors"/> </markers>

所以JS文件是这样的：

 ...
 var category = markers[i].getAttribute("category");
 var gcategory = new Array();
 gcategory = category.split(",");
 // create the marker
      for (var j = 0; j < gcategory.length; j++) {
      var category = gcategory[j];
      var html = "<b>"+name+"<\/b><p>"+address;
      var marker = createMarker(point,name,html,category);
      map.addOverlay(marker);
      }

Answer 2

<!DOCTYPE html>
<html>
  <head>
    <title>Place searches</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
        <link href="css1/font-awesome.css" rel="stylesheet">
    <link href="http://www.wisdomproperties.com/staging/css1/bootstrap.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <style>

body {  margin: 0;  }
#map {   width: 100%;   height: 100%; position: relative; }
.container{ margin: 0 auto; width: 70%; height: 500px; }
.placesCont {
    position: absolute;
    top: 45px;
    z-index: 1;
    margin-left: 20px;
    padding: 15px 10px 0;
}
.placesCont ul li{ cursor:pointer; }
.placesCont ul li a {
    display: inline-block;
    width: 55px;
    height: 55px;
    background: #66af5d;
    text-align: center;
    padding: 5px 0;
    border-radius: 50%;
    color: #fff;
    margin-bottom: 10px;
    border: 2px solid #fff;
}
.placesCont ul li:nth-child(2) a{ background:#1459d8;}
.placesCont ul li:nth-child(2) span{ background:#1459d8;}
.placesCont ul li:nth-child(3) a{  background:#bd6214;}
.placesCont ul li:nth-child(3) span{  background:#bd6214;}
.placesCont ul li:nth-child(4) a{  background:#7e8665; }
.placesCont ul li:nth-child(4) span{  background:#7e8665; }
.placesCont ul li:nth-child(5) a{ background:#936bbf; }
.placesCont ul li:nth-child(5) span{ background:#936bbf; }
.placesCont ul li:nth-child(6) a{ background:#f44336; }
.placesCont ul li:nth-child(6) span{ background:#f44336; }

.placesCont ul li a i { border: 3px solid #fff;  width: 42px; height: 42px; border-radius: 50%; padding: 10px 0; text-align: center;  margin-left: -2px; }

.placesCont ul li span {    display: inline-block;    background: #66af5d;    padding: 11px 40px;    margin-left: -29px;    border-radius: 70px;    z-index: -1;    position: relative;    width: 190px;    text-align: center;    text-transform: capitalize;  color: #fff;    top: 1px; }


    </style>

  </head>
  <body>
        <div class="container">
            <div id="map"></div>
            <div class="placesCont">
                <ul class="list-unstyled">
                    <li value="school" icon = https://maps.gstatic.com/mapfiles/ms2/micons/blue-pushpin.png class="placeBtn" >
                        <a href="javascript:void(0);"><i class="fa fa-car active" title="parking"></i></a>
                        <span>parking</span>
                    </li>
                    <li value="restaurant" icon = http://182.156.201.194/wisdom_properties/images/icons/resturant.png class="placeBtn">
                        <a href="javascript:void(0);"><i class="fa fa-cutlery"  title="restaurant"></i></a>
                        <span>restaurant</span>
                    </li>
                    <li value="travel_agency" icon = http://182.156.201.194/wisdom_properties/images/icons/travelagncy.png class="placeBtn">
                        <a href="javascript:void(0);"><i class="fa fa-bus"  title="travel_agency"></i></a>
                        <span>travel agency</span>
                    </li>
                    <li value="hospital" icon = http://182.156.201.194/wisdom_properties/images/icons/hospital.png class="placeBtn">
                        <a href="javascript:void(0);"><i class="fa fa-heartbeat"  title="hospital"></i></a>
                        <span>hospital</span>
                    </li>
                    <li value="store" icon = http://182.156.201.194/wisdom_properties/images/icons/store.png class="placeBtn">
                        <a href="javascript:void(0);"><i class="fa fa-shopping-bag"  title="store"></i></a>
                        <span>store</span>
                    </li>
                    <li value="bank" icon = http://182.156.201.194/wisdom_properties/images/icons/bank.png class="placeBtn">
                        <a href="javascript:void(0);"><i class="fa fa-briefcase"  title="bank"></i></a>
                        <span>bank</span>
                    </li>
                </ul>
            </div>
    </div>

<script type="text/javascript" 
src="https://maps.googleapis.com/maps/api/js?key=Your-Kye&libraries=places&callback=initMap" async defer></script>
    <script>
        initialLocation = {lat: 13.001637, lng: 80.257942};
        map = document.getElementById('map');
        mapMarkers = [];
        var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
        function initMap() {

          map = new google.maps.Map(map, {
            center: initialLocation,
            zoom: 15
          });

      setMarker(initialLocation, "Project Loction", "https://maps.gstatic.com/mapfiles/ms2/micons/blue-pushpin.png");
      createRadiusCircle();

          infowindow = new google.maps.InfoWindow();
           var places = {
           restaurant:'restaurant',
           bank:'bank',
           store:'store',
           parking:'parking',
           travel_agency:'travel_agency',


          }

            var icons = {
          parking: {
            icon: 'https://maps.gstatic.com/mapfiles/ms2/micons/blue-pushpin.png'
          },
          library: {
            icon: 'https://maps.gstatic.com/mapfiles/ms2/micons/blue-pushpin.png'
          },
          info: {
            icon: 'https://maps.gstatic.com/mapfiles/ms2/micons/blue-pushpin.png'
          }
        };


          getPlaces(places,icons);


                  }

    function createRadiusCircle()
    {
      var radiusCircle = new google.maps.Circle({
        strokeColor: 'white',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#64B5F6',
        fillOpacity: 0.35,
        map : map,
        center : initialLocation,
        radius : 1000
      });
    }

       function setMarker(place, placeName, icon)
       {

            var icon = {
    url: icon, // url
    scaledSize: new google.maps.Size(20, 20), 

};

          marker = new google.maps.Marker({
            icon : icon,
            map : map,
            position : place,
            zoom : 15
          });
          mapMarkers.push(marker);
          google.maps.event.addListener(marker, 'click', function() {
            infowindow.setContent(placeName);
            infowindow.open(map, this);
          });
       }
       function clearMarkers()
       {
          for (var index = 0; index < mapMarkers.length; index++) 
          {
      if(index)
      {
        mapMarkers[index].setMap(null);
      }

          }
          mapMarkers = []
       }

       function getPlaces(place,icon)
       {
          services =  new google.maps.places.PlacesService(map);
          var object = {
            location : initialLocation,
            radius : '1000',
            type : place

          }
         var callBackFunction = function(results, status)
         {
            if (status == google.maps.places.PlacesServiceStatus.OK) 
            {
              for (var i = 0; i < results.length; i++) 
              {
                var place = results[i];
                setMarker(place.geometry.location, place.name,place.icon);
              }
            }
         };

         services.nearbySearch(object, callBackFunction);
       }


       $(document).ready(function(){
          $(".placeBtn i").off("click").on("click", function(){
          $('.active').removeClass('active');
          $(this).addClass('active');
        });



         $(".placeBtn").off("click").on("click", function(){
           clearMarkers();
           var place = $(this).attr("value");
           var icon = $(this).attr("icon");

           getPlaces(place,icon);
         });
       })

      </script>
  </body>
</html>