问题

Question

问题

我根据在一组下拉菜单中选择了哪个选项来制作地图，其中显示的引脚发生了变化。

我已经到了可以点击密苏里州，伊利诺伊州和一个18洞球场的选项的地步，地图将用新的引脚重新创建。但是，当我为9-hole courses 选择选项时，如果此类别中有大约25个课程，则过滤后的数组会显示一个值。

更新＃1

更改了index.html以反映正确的select option

目的

单击其中一个下拉菜单中的选项，然后仅显示引脚与地图上的这些值有关
让用户能够从state下拉列表中进行选择，其中包含密苏里州和伊利诺伊州的 AND holes选项，其中包含9洞和18洞并显示ie。 密苏里州的一个9洞球场

scripts.js中

<script>


    // This provides an array of all the courses
    var locations = [
        {% for content in COPY.courses %}
        {
            "name": "{{ content.name }}",
            "lat": "{{ content.lat }}",
            "lng": "{{ content.lng }}",
            "state": "{{ content.state }}",
            "holes": "{{ content.holes }}"
        },
        {% endfor %}
    ];

    $( document ).ready(function() {

        $("select").change(function(){

            var courseValue = $(this).find(":selected").val();
            console.log(courseValue);

            locations_filtered = locations.filter(function(el) {
                if (courseValue === "MO" || courseValue === "IL") {
                    return el.state == courseValue;
                } else if (courseValue === "9" || courseValue === "18") {
                    return el.holes == courseValue;
                }
            })

            $("#map").empty();
            makeMap(locations_filtered);
        });
    });

    function initMap() {
        makeMap(locations);
    }

    function makeMap(locations) {

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 10,
            center: new google.maps.LatLng(38.6270, -90.1994),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

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

        var marker, i;

        for (i = 0; i < locations.length; i++) {

            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i].lat, locations[i].lng),
                map: map
            });

            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    infowindow.setContent(locations[i].name);
                    infowindow.open(map, marker);
                }
            })(marker, i));

        }
    }
</script>

对于大约100个课程

中的每一个，数据结构都是这样的

{
    "name": "Buffalo Ridge",
    "lat": "36.575508",
    "lng": "-93.190777",
    "state": "MO",
    "holes": "18"
},

的index.html

<div class="header__filter filter--home">
            <label>Filter By State</label>

            <select>
                <option value="default" disabled="disabled">Pick an option</option>
                <option value="All">All states</option>
                <option value="MO">Missouri</option>
                <option value="IL">Illinois</option>
            </select>
        </div>

        <div class="header__filter filter--home">
            <label>Filter By Holes</label>

            <select>
                <option value="default" disabled="disabled">Pick an option</option>
                <option value="All">All holes</option>
                <option value="9">9-hole course</option>
                <option value="18">18-hole course</option>
            </select>
        </div>

Answer 1

解决方案

为stateValue创建两个变量，为holeValue
在您的选择中添加课程，在本例中为select_state和select_hole
您想从所有数组中创建一个过滤后的数组位置。我们只是打电话给firstfilter。
然后你想再次过滤那个数组，我们会称之为 secondFilter
您需要将courseValue的变量更改为stateValue 在firstFilter

holeValue

secondFilter

=== "9"无法正常工作的原因是因为在将字符串与数字进行比较时，它与值和类型不匹配。在这种情况下使用parseInt。
将您的secondFilter传递给makeMap

scripts.js中

<script>


    // This provides an array of all the courses
    var locations = [
        {% for content in COPY.courses %}
        {
            "name": "{{ content.name }}",
            "lat": "{{ content.lat }}",
            "lng": "{{ content.lng }}",
            "state": "{{ content.state }}",
            "holes": "{{ content.holes }}"
        },
        {% endfor %}
    ];

    $( document ).ready(function() {

        $("select").change(function(){

            var stateValue = $(".select_state:visible").find(":selected").val();
            var holeValue = $(".select_hole:visible").find(":selected").val();

            var firstFilter = locations.filter(function(el) {
                if (stateValue === "MO" || stateValue == "IL") {
                    return el.state === stateValue;
                } else {
                    return true;
                }
            });

            var secondFilter = firstFilter.filter(function(el) {
                if (holeValue === "9" || holeValue == "18") {
                    return parseInt(el.holes) === parseInt(holeValue);
                } else {
                    return true;
                }
            })

            console.log(firstFilter);
            console.log(secondFilter);

            $("#map").empty();
            makeMap(secondFilter);
        });
    });

    function initMap() {
        makeMap(locations);
    }

    function makeMap(locations) {

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 10,
            center: new google.maps.LatLng(38.6270, -90.1994),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        });

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

        var marker, i;

        for (i = 0; i < locations.length; i++) {

            marker = new google.maps.Marker({
                position: new google.maps.LatLng(locations[i].lat, locations[i].lng),
                map: map
            });

            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                return function() {
                    infowindow.setContent(locations[i].name);
                    infowindow.open(map, marker);
                }
            })(marker, i));

        }
    }
</script>

返回语句未在数组中提供正确数量的过滤课程

问题

更新＃1

目的

scripts.js中

对于大约100个课程

的index.html

1 个答案:

解决方案

scripts.js中