Всплывающее окно Mapbox не закрывается - PullRequest
Новая
       32

Всплывающее окно Mapbox не закрывается

0 голосов
/ 17 мая 2018

Я адаптировал пример Mapbox для всплывающего окна при наведении , используя другой пример всплывающего окна при нажатии , и все работает отлично, за исключением того, что всплывающее окно не закрывается "MouseLeave". Должно быть, я сделал что-то не так, когда соединил два примера, но нигде не могу найти ответ. Пожалуйста, помогите! 

<html>
  <body>
    <div id='map'></div>
    <script>
    mapboxgl.accessToken = 'pk.eyJ1IjoibWFyeXNoYWZmZXIiLCJhIjoiY2poNnkwZ3pvMDI5ZzJ4cWUyY296NnNjdCJ9.PgJCuPhDYgm8oCmsZlAeQA'; // replace this with your access token
    var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/maryshaffer/cjh6yf7c30apg2sotfzmyf2je', // replace this with your style URL
    });
      
    // code from the next step will go here
  map.addControl(new mapboxgl.NavigationControl());
 
  map.on('mouseenter', 'pilgrimage-sites-markers', function(e) {
        // Change the cursor style as a UI indicator.
        map.getCanvas().style.cursor = 'pointer';
    });
  
  map.on('mouseenter', 'pilgrimage-sites-markers', function(e) {
  var features = map.queryRenderedFeatures(e.point, {
    layers: ['pilgrimage-sites-markers'] // replace this with the name of the layer
  });

  if (!features.length) {
    return;
  }

  var feature = features[0];

  var popup = new mapboxgl.Popup({
    closeOnClick: false,
    offset: [0, -15] })
    .setLngLat(feature.geometry.coordinates)
    .setHTML('<h3>' + feature.properties.title + '</h3><p>' + feature.properties.description + '</p><h4><a href=\"' + feature.properties.link + '\">Learn More</a></h4>')
    .setLngLat(feature.geometry.coordinates)
    .addTo(map);
});  
      
 map.on('mouseleave', 'pilgrimage-sites-markers', function() {
        map.getCanvas().style.cursor = '';
        popup.remove();
  });
      
  </script>
  </body>
</html>

1 Ответ

0 голосов
/ 25 мая 2018

Проблема в том, что переменная popup объявлена ​​локально внутри обработчика события map.on('mouseenter').

И, соответственно, он не определен внутри обработчика события map.on('mouseleave').

Так что вам нужно переместить объявления переменной popup в область действия обеих функций.

Например: https://jsfiddle.net/e5j10x1o/

...