Фильтровать Google Maps API V3 по тегам - PullRequest
Новая
       19

Фильтровать Google Maps API V3 по тегам

0 голосов
/ 06 июля 2011

Моя цель - разрешить пользователю фильтровать результаты по выбранному варианту в верхней части карты. Если бы кто-нибудь мог помочь мне очистить этот код и сделать его функциональным, я был бы очень признателен за ваши усилия

Эта первая часть устанавливает 4 опции, по которым я хотел бы отфильтровать. 

<div id="Filters" style="margin:5px;background:#f4f4f4;border:1px solid #888;padding:5px 5px 5px 10px;">
<label style="color:#555;font-size:12px; font-weight:bold;" for="tags">Filter by: </label>
          <select id="tags" style="outline:none;"> 
              <option value="all">All</option>
              <option value="Western">Western</option> 
              <option value="Central">Central</option> 
              <option value="Eastern">Eastern</option> 
          </select>
     </div>




 (function() {

   // Creating an array that will contain hhs icons
      var hhsIcons = [];
      hhsIcons['Eastern'] = new google.maps.MarkerImage('{!$Resource.markerE}'    );
      hhsIcons['Western'] = new google.maps.MarkerImage('{!$Resource.markerW}'   );
      hhsIcons['Central'] = new google.maps.MarkerImage('{!$Resource.markerC}'   );

   window.onload = function() {

     // Create object literal containing the properties of the map
     var options = {  
       zoom:5,  
       center: new google.maps.LatLng(37.09, -95.71),  
       mapTypeId: google.maps.MapTypeId.ROADMAP,
       mapTypeControl: false
     };

     // Create the map  
     var map = new google.maps.Map(document.getElementById('map'),
 options);

     var homeControlDiv = document.createElement('DIV');
     var homeControl = new HomeControl(homeControlDiv, map);
     homeControlDiv.index = 1;
     map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(homeControlDiv);

     var eastControlDiv = document.createElement('DIV');
     var eastControl = new EastOnly(eastControlDiv, map);
     eastControlDiv.index = 1;
     map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(eastControlDiv);


     var jsonData = {'jsonaccounts': 
     [
     <apex:repeat value="{!Accounts}" var="abc">
       {
         'lat': '{!abc.Latitude__c}',
         'lng': '{!abc.Longitude__c}',
         'hhs': '{!abc.HHS_Region__c}'
       },
     </apex:repeat>
     ]};


     var accountname = [];
     var director = [];
     var vp = [];
     var division = [];

     //Add field data for each account into respective arrays
     <apex:repeat value="{!Accounts}" var="acc">
     accountname.push("{!acc.name}");
     director.push("{!acc.hhs_director__r.name}");
     vp.push("{!acc.area_vp__r.name}");
     division.push("{!acc.HHS_Region__c}");
     </apex:repeat>


     // Create a variable that will hold the InfoWindow object
     var infowindow;


     var markers = [];


     // Loop through the jsondata
     for (var i = 0; i < jsonData.jsonaccounts.length; i++) {

     var jsonaccounts = jsonData.jsonaccounts[i];

       // Create marker data
       var myMarkerData = {         // collecting all custom data that you want to add
                 region : jsonaccounts.hhs,   // to the marker object within an array.
                 }

Когда я добавляю маркеры, я думаю, что мне нужно создать категории для каждой из них, чтобы она позволила мне фильтровать по конкретной категории 

// Adding the markers
       var marker = new google.maps.Marker({
         position: new google.maps.LatLng(jsonaccounts.lat,
 jsonaccounts.lng), 
         map: map,
         icon: hhsIcons[jsonaccounts.hhs],
         data: myMarkerData
       });
       marker.region = jsonaccounts.hhs;      
       markers.push(marker);      
       alert(markers[i].region);


       // Wrap the event listener inside an anonymous function 
       // that we immediately invoke and passes the variable i to.
       (function(i, marker) {

        // Create the event listener. It now has access to the values of
        // i and marker as they were during its creation
         google.maps.event.addListener(marker,
 'click', function() {

           if (!infowindow) {
             infowindow = new google.maps.InfoWindow();
           }

           // Set the content of the InfoWindow
           infowindow.setContent('<b>' + accountname[i] + '</b>' + 
                                 '<br/>Director: ' + director[i] + 
                                 '<br/>VP: ' + vp[i] + 
                                 '<br/>Division: ' + division[i] + 

           // Tie the InfoWindow to the marker 
           infowindow.open(map, marker);

         });

       })(i, marker);

     }
       }; })();

Я не уверен, что этот код полезен, но я остановился на этом 

marker.region = region;
 markers.push(marker); function
 hide(region) {
         for (var i=0; i<map.markers.length; i++) {
           if (map. markers[i].region == region) {
             map.markers[i].setVisible(false);
           }
         }
</script>

1 Ответ

0 голосов
/ 06 июля 2011

В вашем последнем кодовом блоке вы используете map.markers, а это должны быть просто маркеры.

...