通過標記過濾Google Maps API V3

我的目標是允許用戶根據他們在地圖頂部選擇的選項來過濾結果。如果有人可以幫我清理這段代碼，並使其功能，我將不勝感激您的努力通過標記過濾Google Maps API V3

這第一部分設置了我想過濾的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>

來源

2011-07-05 David

在你上一次使用map.markers的代碼塊中，它應該只是標記。

來源

2011-07-06 19:34:50

通過標記過濾Google Maps API V3

回答

相關問題