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，但是我无法让地图调整大小/重新加载/刷新或删除/刷新/重新加载标记数组。

这是ajax过滤器，在我的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>

Map脚本本身位于另一个文件中。

// 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);

我想也许我可以为地图脚本功能设置一种Timeout，但那并不起作用。问题是，无论我把这个功能从map.something开始，都没有用 - 控制台并没有给我任何线索。

有什么可能？感谢您提前提供任何帮助！

Answer 1

不完全确定为什么要将代码包装到如此多的IIFE中。

您正尝试在不同的map之间重用变量<script>，但它是在函数范围/闭包中定义的。因此，无法从该范围外访问它。相反，您应该在全局范围内声明它（map，window.map或var map在根范围内，即不在任何function内

// 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?

使用ajax过滤器成功刷新传单标记？

1 个答案: