如何在Webflow中让Leaflet.markercluster与内容管理系统协同工作

Question

我从Webflow上的forresto找到了与Webflow CMS集成的Leaflet脚本。链接：https://webflow.com/website/Geo-Components-for-Webflow

我想在代码中包含Leaflet.markercluster javascript，因为我有很多位置，它开始变得混乱。

有谁能帮上忙吗？

我已经尝试包括markercluster.js和L.markerClusterGroup

第一个代码：

<script>
window.addEventListener('DOMContentLoaded', function() {

  var places = Array.from(document.querySelectorAll('[data-geo-place]'));
  places.forEach(function(el){
    var elCoords = el
      .querySelector('[data-geo-coordinates]')
      .textContent
      .split(',')
      .map(Number);
    var value = {coordinates: {
      latitude: elCoords[0], 
      longitude: elCoords[1],
    }}
    el.value = value;
    // Just for debug(?)
    el.setAttribute('data-geo-value', JSON.stringify(value));
  });

});
</script>

第二个代码：

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"
   integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
   crossorigin=""/>
 <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"
   integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA=="
   crossorigin=""></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.4/leaflet.markercluster.js"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.0.4/MarkerCluster.Default.css" />

<script>
window.addEventListener('DOMContentLoaded', function() {

  Array.from(document.querySelectorAll('[data-geo-map]')).forEach(function(mapEl) {
    var mapId = mapEl.getAttribute('data-geo-map');
    var map = L.map(mapEl);

        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
         maxZoom: 18,
         id: 'mapbox.light',
          accessToken: 'NOT SHOWN HERE',
        style: 'NOT SHOWN HERE '
        }).addTo(map);

    var myIcon = L.icon({
    iconUrl: 'myIcon.svg',

    iconSize:     [38, 38], // size of the icon
    iconAnchor:   [19, 38], // point of the icon which will correspond to marker's location
    popupAnchor:  [0, 0] // point from which the popup should open relative to the iconAnchor

});

    var allCoordinates = [];
    var markers = []
    Array.from(document.querySelectorAll('[data-geo-place="' + mapId + '"]')).forEach(function(placeEl) {
      var coordinates = [placeEl.value.coordinates.latitude, placeEl.value.coordinates.longitude]
      allCoordinates.push(coordinates);
      var marker = L.markerClusterGroup(coordinates).addTo(map);
      var marker = L.marker(coordinates, {icon: myIcon}).addTo(map)
            .bindPopup(placeEl.innerHTML);
      markers.push(marker);
      // Click place element to pan map
      placeEl.addEventListener('click', function(event) {
        map.panTo(coordinates, {animate: true, duration: 0.5});
        // Close other popups
        markers.forEach(function(otherMarker) {
          otherMarker.closePopup();
        });
        marker.openPopup();
      });
    });

    // Zoom to the markers added
    map.fitBounds(L.latLngBounds(allCoordinates));
  });

});
</script>

Answer 1

欢迎来到SO！

看起来你只是把MarkerClusterGroup和Marker搞混了。

在Leaflet中，您有图层组，其中包含类似标记的子图层。您的MarkerClusterGroup就是这样一个图层组。

只需在您的places forEach循环外部实例化Group (但在您的地图循环内，因为每个地图至少需要一个Group )。

然后将您的标记添加到其中，而不是直接添加到地图中。

mapEls.forEach(mapEl => {
  const map = L.map(mapEl)

  const mcg = L.markerClusterGroup().addTo(map)

  placeEls.forEach(placeEl => {
    const coordinates = [placeEl.value.coordinates.latitude, placeEl.value.coordinates.longitude]
    const marker = L.marker(coordinates).addTo(mcg)
  })
})

注意:对于您的单击监听器打开标记弹出窗口，当标记隐藏在集群下时，您将会遇到问题。使用mcg.zoomToShowLayer(marker, cb)并在cb回调中打开弹出窗口。你应该有关于这个的其他帖子。如果您需要帮助，请随时打开一个新问题。