Совместим ли Magnific Popup с Mapbox GL JS? - PullRequest
Новая
       19

Совместим ли Magnific Popup с Mapbox GL JS?

0 голосов
/ 30 мая 2019

В настоящее время я пытаюсь использовать Magnific Popup с Mapbox GL JS. Я хотел бы запустить div Magnific Popup из всплывающего окна на карте. Я написал код, и хотя он кажется (по крайней мере, на мой взгляд любительским), ошибок нет, div Magnific Popup не запускается.

Я попытался вставить класс Magnific Popup "open-popup-link" в виде строки внутри файла GEOJSON и сослаться на него в JavaScript, и я попытался ввести его как текстовую строку прямо в переменную JavaScript, но хотя оба кода приводят к одному и тому же коду, всплывающее окно все равно не запускается. В качестве теста я привязал элемент Magnific Popup, который я пытаюсь запустить, к элементу Div на странице, не связанной с Mapbox, и он прекрасно запускается (все остальные элементы Magnific Pop на странице, не связанной с Mapbox, также работают отлично).

Вот код: 

map.addLayer({
  "id": "photos",
  "type": "symbol",
  "source": {
    "type": "geojson",
    "data": {
      "type": "FeatureCollection",
      "features": [
        {
          "type": "Feature",
          "properties": {
            "image": "1-1851_Telegraph Hill_small.jpg",
            "divid": "PPPP-popup-1",
            "hrefdiv": "#PPPP_photo_1",
            "descriptionstart": "<strong>San Francisco, Taken from the Western Hill</strong><p>View of San Francisco, Taken from the Western Hill at the foot of Telegraph Hill, looking toward Ringon Point and Mission Valley. lith. of Sarony & Major., Date: c.1851</p><div id=\"",
            "descriptionmiddle": "\" href=\"",
            "icon": "attraction"
          },
          "geometry": {
            "type": "Point",
            "coordinates": [
              -122.417169,
              37.796504
            ]
          }
        },
        {
          "type": "Feature",
          "properties": {
            "image": "11-1865_Embarcadero St at Broadway looking at Telegraph Hill.jpg",
            "divid": "PPPP-popup-11",
            "hrefdiv": "#PPPP_photo_11",
            "descriptionstart": "<strong>Telegraph Hill</strong><p>Embarcadero at Green St, Date: 1865</p><div id=\"",
            "descriptionmiddle": "\" href=\"",
            "icon": "attraction"
          },
          "geometry": {
            "type": "Point",
            "coordinates": [
              -122.399191,
              37.800499
            ]
          }
        }
      ]
    }
  },
  "layout": {
    "icon-image": "{icon}-15",
    "icon-allow-overlap": true
  }
});

map.on('click', 'photos', function (e) {
  var coordinates = e.features[0].geometry.coordinates.slice();
  var description_with_image = '<img src="' + e.features[0].properties.image + '">' + e.features[0].properties.descriptionstart + e.features[0].properties.divid + e.features[0].properties.descriptionmiddle + e.features[0].properties.hrefdiv + '" class="open-popup-link">See more on the Past, Present, and Future of this location</div>'

  while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) {
    coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
  }

  new mapboxgl.Popup()
    .setLngLat(coordinates)
    .setHTML(description_with_image)
    .addTo(map);
});

Я не получаю никаких сообщений об ошибках, просто ничего не происходит при нажатии на ссылку. Я относительно новичок в Mapbox GL JS, и мне было интересно, если проблема может быть, потому что mapbox GL JS не любит закладки, только внешние ссылки HTML? Может ли кто-нибудь дать несколько советов относительно того, возможно ли это, и если да, то как я могу заставить его работать?

Большое спасибо заранее за любую помощь, я ценю это.

...