リーフレットマーカーはAJAXフィルターでリフレッシュされますか？

Question

このajaxフィルタが成功した後は、地図を再読み込みする方法、または使用可能なすべてのマーカーを再読み込みする方法がわかりません。私はJqueryとJSで本当にうまくいかないので、私と一緒に抱きしめてください。ここで

私はページ内に持っているものです。記事のフィルタリングが正常に動作

<div id="mapwrap"></div> //this is my Leaflet map div 
<div id="response"></div> //this is where the results are inserted 
<div id="postlist"><?php post_liste();?></div> 

、マーカーのdivが各項目に追加されている、しかし私は、サイズを変更/再ロード/リフレッシュにマップを得ることができませんか、マーカ配列を削除/リフレッシュ/リロードします。

これは右の私のdivをした後に呼び出されアヤックスフィルタ、されています

<script type="text/javascript"> 
jQuery(function($){ 
$('#filter').submit(function(){ 
    var filter = $('#filter'); 
    $.ajax({ 
     url:filter.attr('action'), 
     data:filter.serialize(), // form data 
     type:filter.attr('method'), // POST 
     beforeSend:function(xhr){ 
      filter.find('button').text('Processing...'); // changing the button label 
     }, 
     success:function(data){ 
      filter.find('button').text('Apply filter'); // changing the button label back 
      $('#response').html(data); // insert data 
      $('#postlist').remove(); 
      // reload markers, I tried: 
      // map.clearLayers(); 
      // map._resetView(map.getCenter(), map.getZoom(), true); 
      // map.invalidateSize(); 
     } 
    }); 
    return false; 
}); 
}); 
</script> 

地図スクリプト自体は別のファイルです。

// for rendering the Leaflet Map 

var map; 

(function ($) { 
    $(document).ready(function() { 
map = L.map('mapwrap', {scrollWheelZoom: false}).setView([51.51, 9.19], 6); 

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', { 
    maxZoom: 18, 
    attribution: '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a>, ' + 
    '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 
    'Imagery &copy; <a href="http://mapbox.com">Mapbox</a>', 
    id: 'mapbox.streets', 
    //layers: [ group ], 
}).addTo(map); 

var LeafIcon = L.Icon.extend({ 
    options: { 
    iconSize:  [43, 57], 
    iconAnchor: [21, 57], 
    popupAnchor: [0, -43], 
    } 
}); 

var markers = []; 

var marker = []; 
$.each($('.marker'), function() { 
    var lat = $(this).attr('data-lat'); 
    var lng = $(this).attr('data-lng'); 
    var name = $(this).attr('data-title'); 
    var link = $(this).attr('data-url'); 
    var icon = $(this).attr('data-icon'); 
    marker = [ name, lat, lng, icon, link ]; 
    markers.push(marker); 
}); 

var group = new L.featureGroup().addTo(map); 

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

    var myIcon = new LeafIcon({iconUrl: markers[i][3] }); 
    var marker = new L.marker([markers[i][1],markers[i][2]], {icon: myIcon }); 
     marker.bindPopup(markers[i][0]) 
     marker.addTo(group); 
} 

// this is for getting different zoom levels on sub-pages, where the mapwrap is smaller 
$(window).on('orientationchange pageshow resize', function() { 
    $("#mapwrap").height(); 
    map.invalidateSize(); 
    if ($("#mapwrap").height() < 400) { map.fitBounds(group.getBounds(), { maxZoom: 10 }); } 
}).trigger('resize'); 

    }); 
})(jQuery); 

マップスクリプト機能にタイムアウトを設定できるとは思っていたが、うまくいかなかった。事は、map.somethingで始まる関数に何を入れても動作しません - コンソールは私に手がかりを与えません。

どうすればよいですか？事前に助けてくれてありがとう！

Answer 1

非常に多くのIIFEにコードをラップする理由は正確にはわかりません。

異なる<script>の間で変数mapを再利用しようとしていますが、機能スコープ/クロージャで定義されています。したがって、その範囲外からアクセスすることはできません。代わりに、グローバルに宣言する必要があります（どちらか任意のfunction内側すなわちmap、ルートスコープでwindow.mapかvar map、ではない）

// AJAX code unchanged, using map variable. 

// In your map script 
var map; 

$(document).ready(function() { 
    // do your stuff but DO NOT re-declare `var map`, just re-use `map`. 
    map = L.map('mapwrap', options); 
}); 

は、あなたがどのように、どこがあなたのマップスクリプトファイルを挿入表示How do JavaScript closures work?