编辑1：

Question

我喜欢Leaflet，因为它比Google地图更容易包含和更改外观。我在我的Wordpress网站上使用ACF插件，其中有几个帖子，其中包含位置。现在我所做的是使用div属性将数据从php传递给JS，如下所示：

<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>" data-title="<?php echo $title; ?>" data-url="<?php echo $link; ?>" data-category="<?php echo $typ; ?>"></div>

然后将此数据传递到Leaflet地图标记：

// for rendering the Leaflet Map
(function ($) { 
  $(window).load(function () {
    var map = L.map('mapwrap').setView([51.51, 9.19], 5);

    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.light',
      //layers: [ group ],
    }).addTo( map );    

    $('.marker').each(function() {
      var lat = $(this).attr('data-lat');
      var lng = $(this).attr('data-lng');
      var name = $(this).attr('data-title');
      var url = $(this).attr('data-url');
      var typ = $(this).attr('data-category');
      var marker = new L.marker([ lat, lng ]).bindPopup( name ).addTo( map );
    });

  });
})(jQuery);

只要所有标记都出现在地图上，它就能正常工作。但是现在我正在尝试重置地图，以便显示所有标记，并在稍后阶段将它们聚类。我找到的所有示例都使用“for”循环遍历标记，但我无法使其正常工作，因此所有数据都在我的php和脚本之间传递...我对jQuery不太好或JS，所以请耐心等待。

所以这是我的问题：

是否有更好的方法可以根据“标记”类循环浏览页面上的每个标记？我使用相同的函数来回显单个帖子的标记div，也用于用户查询或归档查询。
如何在放置所有标记后正确调整地图大小？
为每个标记添加基于类别（var typ）的图标的最佳方法是什么（目前有两种选择）？

提前致谢

编辑1：

我玩了一些不同的方法来存储来自循环的数据，因为我需要在数组中对标记进行分组。所以这就是我提出的：

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

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 ];
  console.log( marker );
});

var markers = [ marker ];

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

这样，我的所有标记及其各自的图标（类别相关图标）都被添加到“标记”数组中。仍需要进一步测试，但似乎有效。

来自acf字段值的传单标记

编辑1：

0 个答案: