Я использую 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: '© <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();
});
}