谷歌地圖 - 基於JavaScript對象的篩選結果

Question

因此，我有一個谷歌地圖，從JSON文件中提取約185個公司地址和信息我已經擁有了所有工作，但我想要做的是在您過濾結果「勾選」單選按鈕或從選擇框中選擇一個選項。

這裏是一個工作plunker - https://plnkr.co/edit/jHCuVVhGDLwgjNw4bcLr

這裏是我的地圖代碼：

var map; 

function initialize() { 
    var mapOptions = { 
     center: new google.maps.LatLng(58, 16), 
     zoom: 2, 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
    }; 
    map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); 
} 

var seg = { 
    1:'invesCastProd', 
    2:'forged', 
    3: 'airframe', 
    5: 'corp', 
    6: 'structurals'   
} 

var comp = { 
    1:'structurals', 
    2:'airfoils', 
    3: 'airfoils', 
    4: 'wyman', 
    5: 'energy', 
    6: 'strucComp', 
    7: 'mechHard', 
    8: 'engineProd', 
    9: 'corp', 
    10: 'aero', 
    12: 'timet', 
    13: 'specMetals' 
} 

$.getJSON("locations.json", function(json1) { 
    $.each(json1, function(key, data) { 
    var latLng = new google.maps.LatLng(data.latitude, data.longitude); 
    // Creating a marker and putting it on the map 
    var marker = new google.maps.Marker({ 
     position: latLng 
    }); 
    marker.setMap(map); 

    var infoWindow = new google.maps.InfoWindow(); 

    google.maps.event.addListener(marker, 'click', function() { 

     if (infoWindow) {infoWindow.close();} 
     infoWindow = new google.maps.InfoWindow({ 
     content: "<h5>" + data.display_name + "</h5>" + 
     "<div>" + data.street+ "</div>" + 
     "<div>" + data.city + ", " + data.state + " &nbsp; " + data.postal_code + "</div>" + 
     "<div><strong>" + seg[data.segment_id] + "</strong></div>" + 
     "<div><strong>" + comp[data.component_id] + "</strong></div>" + 
     "<div class='mapPhoneNum'>" + data.telephone + "</div>" + 
     "<a href=" + data.web_url + ">Website</a>" 
     }); 
     infoWindow.open(map, marker); 
     map.setZoom(15); 
     map.panTo(this.getPosition()); 

    }); 

    //############################################ 
    //  I don't know what to add here 
    //############################################ 
    filterMarkers = function(){ 

    } 

    }); 

}); 

// Init map 
initialize(); 

這裏是HTML：

<div class="mapWrap"> 
    <div id="map-canvas"></div> 
    <div class="investCast"> 
    <select id="pccLoc" onchange="filterMarkers(this.value);"> 
    <option selected="selected" disabled="disabled" value="">Please select category</option> 
    <option class="optGroup" value="corp">PCC Corporate</option> 
    <option class="optGroup" value="invesCastProd">Investment Cast Products</option> 
    <option class="optChild" value="structurals"> - PCC Structurals</option> 
    <option class="optChild" value="airfoils"> - PCC Airfoils</option> 
    <option class="optGroup" value="forged">Forged Products</option> 
    <option class="optChild" value="wyman"> - Wyman-Gordon</option> 
    <option class="optChild" value="energy"> - PCC Energy Group</option> 
    <option class="optChild" value="timet"> - Titanium Metals Corp. (TIMET)</option> 
    <option class="optChild" value="specMetals"> - Special Metals Corp. (SMC)</option> 
    <option class="optGroup" value="airProd">Airframe Products</option> 
    <option class="optChild" value="fasteners"> - PCC Fasteners</option> 
    <option class="optChild" value="aero"> - PCC Aerostructures</option> 
    </select> 
    </div> 
</div> 

<div class="mapSelWrap"> 

    <div class="corpSel optGroup"><input onclick="filterMarkers(this.value);" type="radio" name="loc" value="corp" /> PCC Corporate Headquarters</div> 

    <div class="selInnerWrap"> 
    <div class="selInner"> 
     <div class="optGroup"><input onclick="filterMarkers(this.value);" type="radio" name="loc" value="invesCastProd" /> Investment Cast Products</div> 
     <div class="optChild"><input onclick="filterMarkers(this.value);" type="radio" name="loc" value="structurals" /> PCC Structurals</div> 
     <div class="optChild"><input onclick="filterMarkers(this.value);" type="radio" name="loc" value="airfoils" /> PCC Airfoils</div> 
    </div> 
    </div> 

    <div class="selInnerWrap"> 
    <div class="selInner"> 
     <div class="optGroup"><input onclick="filterMarkers(this.value);" type="radio" name="loc" value="forged" /> Forged Products</div> 
     <div class="optChild"><input onclick="filterMarkers(this.value);" type="radio" name="loc" value="wyman" /> Wyman-Gordon</div> 
     <div class="optChild"><input onclick="filterMarkers(this.value);" type="radio" name="loc" value="energy" /> PCC Energy Group</div> 
     <div class="optChild"><input onclick="filterMarkers(this.value);" type="radio" name="loc" value="timet" /> Titanium Metals Corp.</div> 
     <div class="optChild"><input onclick="filterMarkers(this.value);" type="radio" name="loc" value="specMetals" /> Special Metals Corp.</div> 
    </div> 
    </div> 

    <div class="selInnerWrap"> 
    <div class="selInner"> 
     <div class="optGroup"><input onclick="filterMarkers(this.value);" type="radio" name="loc" value="airframe" /> Airframe Products</div> 
     <div class="optChild"><input onclick="filterMarkers(this.value);" type="radio" name="loc" value="fasteners" /> PCC Fasteners</div> 
     <div class="optChild"><input onclick="filterMarkers(this.value);" type="radio" name="loc" value="aero" /> PCC Aerostructures</div> 
    </div> 
    </div> 

</div> 

我所試圖做的是建立一個「 filterMarkers「功能，當你選擇和選擇或者勾選一個單選按鈕來過濾基於segment_id和component_id的引腳（這只是你可以看到的數字e的JSON文件）。你也可以在我的plunk中看到（https://plnkr.co/edit/jHCuVVhGDLwgjNw4bcLr）JavaScript文件中，我用我的「過濾器」創建了兩個對象（var = seg {}，var = comp {}），我已經匹配了JSON文件中的數字。它的工作原理是，當你點擊一個pin並彈出信息窗口時，粗體文本是與位置關聯的過濾器。而且我還將相應的值設置爲HTML元素中的過濾器。

那麼如何基於對象變量過濾這些結果？我非常喜歡這個想法，而我只是停留在過濾部分。

我只是不真正瞭解如何加入到過濾功能：

filterMarkers = function(){ 

} 

感謝您的幫助！

Answer 1

這不是一個容易解釋的...
不錯的項目，順便說一句。

下面是我從your Plunker改變，改變順序：

1. 我感動從<head>的谷歌地圖API的腳本調用<html>結束。
2. 我向其添加了async defer並將回調從initMap更改爲initialize，這就是您如何命名您的功能。
3. 我在腳本結尾刪除了initialize()呼叫。它是API回調的工作來觸發它。

這可以修復控制檯中的錯誤。
然後，我回到你的問題。

1. 我在第一個收音機中添加了一些數據屬性...因爲您要使用來自JSON的component_id和segment_id值進行過濾。

這就是：

<div class="corpSel optGroup"><input onclick="filterMarkers($(this));" type="radio" name="loc" value="corp" data-segment_id="2" data-component_id="13"/> PCC Corporate Headquarters</div> 

在 filterMarkers = function(category){

現在，我們可以retreive這些過濾信息。

所以我寫了這個功能：

filterMarkers = function(category){ 
    //console.log(category); 

    console.log(category.data()); 
    var component = category.data("component_id"); 
    var segment = category.data("segment_id") 

    // Clear markers 
    setMapOnAll(null); 
    //marker = []; 
    var filteredMarkers=[]; 

    $.each(myJSON, function(key, data) { 
     //console.log(key); 

     if((myJSON[key].component_id == component) && (myJSON[key].segment_id == segment)){ 
      console.log("FOUND"); 

      filteredMarkers.push(key); 
     } 
    }); 

    for(i=0;i<filteredMarkers.length;i++){ 
     myMarkers[filteredMarkers[i]].setMap(map); 
    } 
} 

function setMapOnAll(map) { 
    for (var i = 0; i < myMarkers.length; i++) { 
     myMarkers[i].setMap(map); 
    } 
} 

注：我把setMapOnAll(map)函數從API documentation。

所以訣竅是刪除每個無線電輸入點擊地圖上的所有標記。
「過濾」循環然後檢查所有json對象以查看過濾標準是否匹配。

臨時數組（filteredMarkers）被創建以保持myMarkers陣列過濾keys並用它來重新繪製權的標記。

Updated Plunker