Question

我花了最后两天试图弄清楚这一点。但事实证明，我不能。我已经使用mapbox设置了地图，并且为标记创建了一个GeoJSON文件。标记包含标题，描述等。一个新功能应该是开放时间的显示，我发现了一个不错的小jQuery插件，可以为我工作，一切似乎都正常，但是在使用更多标记进行测试之后，它始终显示GeoJSON中的第一个开放时间记录

我的代码（这只是应该发生魔术的部分）

$.getJSON('assets/geojson/locations_dev.geojson', function (geojson) {
      geojson.features.forEach(function (marker) {

        // create a HTML element for each feature
        var el = document.createElement('div');
        el.className = 'marker';

        //Get Data for Opening Hours
        var data = marker.properties.openinghours;

        //Check if data is not empty
        if(data != null) {
          function currentStatus() {
            $('.current-status-placeholder').openingHours({ show: 'current-status', hours: data});
            $('span:contains("Geöffnet")').addClass('open');
            $('span:contains("Geschlossen")').addClass('closed');
          }

          function closingIn() {
            $('.closing-in-placeholder').openingHours({ show: 'closing-in', hours: data});
            $('span:contains("Öffnet")').addClass('closing-hint');
          }

          //Only allow one click on each marker and draw the current status
          $(document).one('click', '.marker', function() {
              currentStatus();
              closingIn();
          });
        }

        var content = '<span class="badge current-status-placeholder"></span><br><span class="closing-in-placeholder"></span><h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p><p>' + '<span class="product-title">Es gibt: </span>' + marker.properties.products + '</p><p>' + '<span class="product-title">Wie?: </span>' + marker.properties.how + '</p><p>' + '<span class="product-title">Telefon: </span><a href="tel:' + marker.properties.tele + '">'+ marker.properties.tele +'</a></p><p>' + '<a class="website" target="_blank" href="' + marker.properties.link + '">Website + Mehr</a></p>';

        // make a marker for each feature and add to the map
        new mapboxgl.Marker(el)
          .setLngLat(marker.geometry.coordinates)
          .setPopup(new mapboxgl.Popup({ offset: 25 })
            .setHTML(content))
          .addTo(map);
      });
  });

我认为使用.one()函数可能会有所帮助。据我了解，我认为每个标记都在发生这种情况，因为它在循环中。

$(document).one('click', '.marker', function() {
              currentStatus();
              closingIn();
          });

为了获得更好的测试环境，您可以在此处查看并运行代码： http://saveyourlocalwirtshaus.de/index_dev.html

带有jQuery内容的Mapbox弹出窗口

0 个答案: