Mapbox Popup с содержимым jQuery - PullRequest
Новая
       15

Mapbox Popup с содержимым jQuery

0 голосов
/ 02 апреля 2020

Я провел последние два дня, пытаясь понять это. Но, оказывается, я не могу. Я настроил карту с mapbox, и у меня есть файл Geo JSON для моих маркеров. Маркеры содержат заголовок, описание и так далее. Одной из новых функций должно быть отображение часов работы, я обнаружил небольшой плагин jQuery, который работает за меня, и все, кажется, работает просто отлично, но после тестирования с большим количеством маркеров, он всегда показывает первую запись открытия часов в Geo JSON.

Мой код (это та часть, где должны происходить маги c) 

$.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() , Насколько я понимаю, я думал, что это происходит для каждого маркера, поскольку он находится в l oop. 

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

. Для лучшей среды тестирования вы можете просмотреть и запустить код здесь: http://saveyourlocalwirtshaus.de/index_dev.html

Береги себя, Доминик

...