Меню для управления остановками на карте Bing - PullRequest
Новая
       30

Меню для управления остановками на карте Bing

0 голосов
/ 05 февраля 2019

У меня есть карта Bing с 2000+ остановками, указанными на карте с помощью значков карты.Я хочу иметь двухуровневое меню справа от карты, которое позволяет пользователю снять флажок, и все значки карты, связанные с первым или вторым уровнем, исчезают с карты.

Я помещаю свойразбить информацию на переменные: 

{ 'lat': 33.62884998, 'lng': -84.29331064, 'state': 'X', 'title': 'Route 
01', 'description': 'here','icon' 
:'http://maps.google.com/mapfiles/ms/icons/blue-pushpin.png' },
{ 'lat': 32.88286, 'lng': -83.76431, 'state': 'X2', 'title': 'Route 02', 
'description': 'there','icon' 
:'http://maps.google.com/mapfiles/ms/icons/pink-pushpin.png' },

И затем я использую функции для сбора списка: 

   $(function () {

        var uniqueStates = [];

        initialData.forEach(function (ele) {
            ele.visible = true; // add visible property to all pushPinData entries, set to true

            if (!uniqueStates.some(v => v == ele.state)) {  //add this state to the list of unique states if not already there
                uniqueStates.push(ele.state);
            }

        });

        uniqueStates.forEach(state => { //iterate through unique states
            $("#controls").append("<div style=\"margin-top:0.5em;margin-bottom:0.5em\">");  //add dive to separate out groups by state
            $("#controls").append("<div><label><input class=\"state-cb\" type=\"checkbox\"  data-state=\"" + state + "\" checked>" + state + "</label></div>"); // add checkbox for specific state

            var stateRoutes = initialData.filter(pin => {  //get from pushPinInfos where the state matches the current state

             return pin.state == state;

            });

            var uniqueStateRoutes = [];

            stateRoutes.forEach(rte => {    //iterate through routes for this state, from earlier
                if (!uniqueStateRoutes.some(v => v == rte.title)) { //if unique route for state is not already in array, add it
                    uniqueStateRoutes.push(rte.title);
                } 
            });

            uniqueStateRoutes.forEach(uniqueRte => {    //for each unique state, add a checkbox
                $("#controls").append("<div><label><input id=\"" + state + uniqueRte + "\" class=\"route-cb " + uniqueRte + " " + state + "\" style=\"margin-left:1em\" type=\"checkbox\"  data-state=\"" + state + "\"  data-route=\"" + uniqueRte + "\" checked>" + uniqueRte + "</label></div>")

            });

            $("#controls").append("</div>"); //close div from earlier

        });


        $(".state-cb").change(function () { //bind state checkbox change handler

            var checked = $(this).prop("checked");  
            var state = $(this).data("state");  
            $("." + state).prop("checked", checked);    //select all checkboxes with same state class and set them checked or not.

        });

        $("#refresh").click(function () {   //bind refresh button event handler

            initialData.forEach(ele => {
                var checked = $(".route-cb[data-route='" + ele.title + "'][data-state='" + ele.state + "']").prop("checked") ;//get whether related checkbox is checked
                ele.visible = checked;
            });
            RefreshMap();

        });

    });
            CollapsibleLists.applyTo(document.getElementById('state'));
    function RefreshMap() {
        var infoboxLayer = new Microsoft.Maps.EntityCollection();
        var pinLayer = new Microsoft.Maps.EntityCollection();
        var apiKey = "KEY HERE";
        var map = new Microsoft.Maps.Map(document.getElementById("map"), { credentials: apiKey });
        // Create the info box for the pushpin
        pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0, 0), { visible: false });
        infoboxLayer.push(pinInfobox);
        var locs = [];

        var data = initialData;

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

            var currentPushpin = data[i];

            if (currentPushpin.visible) {

                locs[i] = new Microsoft.Maps.Location(currentPushpin.lat, currentPushpin.lng);
                var pin = new Microsoft.Maps.Pushpin(locs[i], { icon: currentPushpin.icon, width: '20px', height: '20px' });
                pin.Title = currentPushpin.title;
                pin.Description = currentPushpin.description;
                pinLayer.push(pin);
                Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
            }
        }
        map.entities.push(pinLayer);
        map.entities.push(infoboxLayer);
        var bestview = Microsoft.Maps.LocationRect.fromLocations(locs);
        map.setView({ center: bestview.center, zoom: 5 });
    }

При доступе к странице появится карта со всеми остановками.В меню справа будет Штат и Маршрут под Штатом.Если пользователь снимает отметку с состояния, все маршруты / остановки, связанные с этим состоянием, исчезнут с карты.Если пользователь снимает отметку только с маршрутов, с карты исчезают только те маршруты, и остановки исчезают.

И все работает как сейчас.Тем не менее, список меню очень длинный.Было бы намного удобнее для пользователей, если бы список рухнул к государству.Как я могу это сделать?

...