Запретить множественные вызовы "конца хода" при перерисовке карты - PullRequest
0 голосов
/ 06 мая 2020

Я использую Leafleft JS, чтобы выполнить поиск свойств на карте.

У меня есть область по умолчанию для начала карты, но мне также нужна возможность переместить карту в новое местоположение, а затем вызовите AJAX и верните свойства в этом новом месте.

Однако я заметил, что когда вы ищете место, карта перемещается в это место нормально, но постоянно попадает в " moveend "функция. Есть ли способ предотвратить это или лучший способ перерисовать карту или предотвратить многократное использование функции?

Ура

Мой JS Код:

var map_layer = $('.map-layer');

if(map_layer.length)
{
    var lat = map_layer.data('lat');
    var lng = map_layer.data('lng');
    var zoom = map_layer.data('zoom');

    var mymap = L.map('map').setView([lat, lng], zoom);

    L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(mymap);

    var boundaries = mymap.getBounds();
    var ne_lat = boundaries.getNorthEast();
    var sw_lat = boundaries.getSouthWest();
    var markerArray = [];
    var group;
    var properties_found;
    var markers_running = false;

    // Populate Form Fields
    $('.ne_lat').val(ne_lat);
    $('.sw_lat').val(sw_lat);

    // Get First Time Load Markers...
    get_markers(ne_lat, sw_lat);

    mymap.on('moveend', function()
        {
            // On Zoom Finish....
            var new_bounds = mymap.getBounds();
            ne_lat = new_bounds.getNorthEast();
            sw_lat = new_bounds.getSouthWest();

            get_markers();

            // Populate Form Fields
            $('.ne_lat').val(ne_lat);
            $('.sw_lat').val(sw_lat);

            mymap.removeLayer(group);
        }
    );
    var polygon = L.polygon(
        [

        ]
    ).addTo(mymap);

    function get_markers()
    {
        markers_running = true;

        var form = $('.ajax-map-search');

        // Serailise Form Data...
        var formData = $(form).serialize();

        $.ajax(
            {
                type: 'POST',
                url: '/map-search',
                data: formData,
                success: function ( data )
                {
                    markerArray = [];

                    properties_found = Object.keys(data.properties).length;

                    $( data.properties ).each(function( k, v )
                    {
                        var lat = v.latitude;
                        var lng = v.longitude;
                        var html = v.html;

                        markerArray.push(L.marker([lat, lng]).bindPopup(html));
                    });

                    if(markerArray.length > 0)
                    {
                        // Remove Layer...
                        if(group)
                        {
                            mymap.removeLayer(group);
                        }

                        group = L.featureGroup(markerArray).addTo(mymap);
                    }
                    else
                    {
                        if(group)
                        {
                            mymap.removeLayer(group);
                        }
                    }

                    var map_lat = data.map_lat;
                    var map_lng = data.map_lng;

                    if(map_lat != '' && map_lng != '')
                    {
                        mymap.panTo([map_lat, map_lng], zoom);
                        //mymap.setView([map_lat, map_lng], zoom);

                        // Populate Form Fields
                        $('.ne_lat').val(ne_lat);
                        $('.sw_lat').val(sw_lat);
                    }

                    update_text_box(properties_found);
                }
            }
        )
    }

    function update_text_box(number)
    {
        $('#map-results__text').remove();

        L.Control.textbox = L.Control.extend(
            {
                onAdd: function(mymap)
                {
                    var found_text = number +' Properties Found';
                    var text = L.DomUtil.create('div');
                    text.id = "map-results__text";
                    text.innerHTML = found_text;
                    return text;
                }
            });

        L.control.textbox = function(opts) { return new L.Control.textbox(opts);}
        L.control.textbox({ position: 'topright' }).addTo(mymap);
    }

    $('.ajax-map-search').submit(function(e)
    {
        get_markers();

        e.preventDefault();
    });
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...