我将如何设置 JS 过滤器来过滤掉 bing 图钉的特定字段？

问题描述

我正在尝试为我的 bing 地图应用程序设置过滤器，但是我正在努力实现它。该应用程序的目的是查看附近城市的学校，然后可以按类别（小学、中学、中学等）筛选学校。欢迎任何帮助。

使用我用于应用程序的数据链接到一个 pastebin（它在 JSON 中）： https://pastebin.com/RzkqBkFv

这是我目前使用的 javascript：

function loadMapScenario() {
    let map = new Microsoft.Maps.Map(document.getElementById('schoolMap'),{
        center: new Microsoft.Maps.Location(43.2557,-79.871),})
    
    let infoBoxOptions = {
        visible: false,}
    let infoBox = new Microsoft.Maps.InfoBox(map.getCenter(),infoBoxOptions)
    infoBox.setMap(map)

        for (i = 0; i < education.length; i++) {
            let location = new Microsoft.Maps.Location(
                education[i].LATITUDE,education[i].LONGITUDE
            )
    
            let pushpinOptions = {
                title: education[i].NAME,}
            let pushpin = new Microsoft.Maps.pushpin(location,pushpinOptions)
            pushpin.Metadata = {
                myTitle: education[i].NAME,myDescription: education[i].ADDRESS,myCategory: education[i].CATEGORY,}
    
            Microsoft.Maps.Events.addHandler(pushpin,'click',pushpinClicked)
    
            map.entities.push(pushpin)
        }

    navigator.geolocation.getCurrentPosition(
        function (position) {
        var loc = new Microsoft.Maps.Location(
            position.coords.latitude,position.coords.longitude
            )
            var pin = new Microsoft.Maps.pushpin(loc);
            pin.Metadata = {
                myDescription:"You are here"
            }
            map.entities.push(pin);
        
        
        },function(error){
            let errMsg
            switch (error.code){
                case error.PERMISSION_DENIED:
                    errMsg = 'User denied the request for geolocation'
                    break
                case error.POSITION_UNAVAILABLE:
                    errMsg = 'Location information is unavailable'
                    break
                case error.TIMEOUT:
                    errMsg = 'The request to get user location timed out'
                    break
                case error.UNKNowN_ERROR:
                default:
                    errMsg = 'An unkNown error occurred'
                    break
        }
        alert(errMsg)
    },{
        enableHighAccuracy: true
    })

    function pushpinClicked(e) {
        let infoBoxNewOptions = {
            location: e.target.getLocation(),title: e.target.Metadata.myTitle,description: e.target.Metadata.myDescription,visible: true,}
        infoBox.setoptions(infoBoxNewOptions)
    }//clicked

    function filterSchools(){
        console.log(map.entities.pushpin.visible);
        let list = document.getElementsByName("filter");
        let selection;
        for(i = 0; i < list.length; i++) { 
            if(list[i].checked == true){
                selection = list[i].value;
                break;
            }//if
        }//for
        switch (selection) {
            case "all":
                pushpinOptions.visible=true;
                pushpin.set
                break;
            case "E":
                break;
            case "S":
                break;
            case "PS":
                break;
            case "A":
                break;
            case "G":
                break;
            case "STT":
                break;
            default:
                break;
        }
    }//fillter
}

这是我的 HTML：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Geo-location and Maps Assignment</title>
        <Meta charset="UTF-8">
        <Meta name="viewport" content="width=device-width,initial-scale=1">
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript" src="js/schools.js"></script>
        <script type="text/javascript" src="js/directions.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script type="text/javascript" src="https://www.bing.com/api/maps/mapcontrol?key=Ag-9UmaOu3hCq2d2bxFTnt2ryCnUmD81o8_dEMuHCqbAFJ0TMwiY1IuhzPUjRaC6&callback=loadMapScenario" async defer></script>
    </head>
    <body>
        <form id = "filterOptions">
            <input type="radio" id="all" name="filter" value="all" >
            <label for="all">Show All Schools</label><br>
            <input type="radio" id="Elementary" name="filter" value="E">
            <label for="Elementary">Elementary</label><br>
            <input type="radio" id="Secondary" name="filter" value="S">
            <label for="Secondary">Secondary</label><br>
            <input type="radio" id="Post" name="filter" value="PS">
            <label for="Post">Post-Secondary</label><br>
            <input type="radio" id="alt" name="filter" value="A">
            <label for="alt">Alternative</label><br>
            <input type="radio" id="adult" name="filter" value="G">
            <label for="adult">Adult</label><br>
            <input type="radio" id="SectionTT" name="filter" value="STT">
            <label for="SectionTT">Section 23</label><br>
        </form>
        <div id="schoolMap" style="width: 600px; height: 600px;"></div>
        <div id="directions"></div>
        
        <form>
            
        </form>
    </body>
    <script>
        
    </script>
</html>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

bing bing-maps javascript