猿问

使用复选框过滤 Google 地图标记

当用户选择一个复选框并单击“在地图上显示”时,我试图显示某些标记。选择“高迪之旅”时应显示 2 个标记,选择“哥特式之旅”时应显示两个不同的标记。但是,它不会过滤 createMarkers() 函数中的结果,而是在单击按钮时显示所有标记。


我不明白为什么它没有过滤结果,我没有收到任何错误。


<section>

        <div class="container">

            <h2>Choose your tour:</h2>

            <div class="container" id="selectTour">

                <div class="form-check-inline">

                    <label class="form-check-label">

                        <input type="checkbox" class="form-check-input" id="one">Gaudi Tour

                    </label>

                </div>

                <div class="form-check-inline">

                    <label class="form-check-label">

                        <input type="checkbox" class="form-check-input" id="two">Gothic Tour

                    </label>

                </div>

            </div>

            <div class="container">

                <button onclick="updateMarkers();">Show on Map</button>

            </div>


            <!--The Map-->

            <div class="container">

                <div id="map"></div>

            </div>

        </div>

    </section>


var map;


var markers = [];



//---------------------Data of Locations-----------------


let locations = [{

        name: 'one',

        tour: 'gaudi',

        coords: { lat: 41.403706, lng: 2.173504 },

        content: 'google',

    },

    {

        name: 'one',

        tour: 'gaudi',

        coords: { lat: 41.4145, lng: 2.1527 },

        content: 'maps',

    },

    {

        name: 'two',

        tour: 'gothic',

        coords: { lat: 41.3839, lng: 2.1821 },

        content: 'are'

    },

    {

        name: 'two',

        tour: 'gothic',

        coords: { lat: 41.3840, lng: 2.1762 },

        content: 'annoying'

    }

];


//---------------------Initializing Map-----------------


function initMap() {

    var mapOptions = {

        center: new google.maps.LatLng(41.3851, 2.1734),

        zoom: 12

    };



    map = new google.maps.Map(document.getElementById("map"), mapOptions);


}

任何建议都会有很大帮助。


收到一只叮咚
浏览 144回答 1
1回答
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答