Событие клика не срабатывает после закрытия всплывающего окна в leafletjs

Question

Я использую листовки с Openstreetmaps и покажу всплывающее окно.

Если я нажимаю на карту, всплывающие окна открываются.

Но почему событие click не запускается, если я закрываю текущее всплывающее окно первым? (В этом случае мне нужно нажать два раза на карте, чтобы открыть новое всплывающее окно)

// center of the map 
 
var ll = [-37.8136, 144.9631]; 
 
var layers = [ 
 
    // add the OSM layer 
 
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
 
    zoom: 18 
 
    }) 
 
] 
 

 
// map's options 
 
var options = { 
 
    center: ll, 
 
    zoom: 12, 
 
    scrollWheelZoom: false, 
 
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors', 
 
    layers: layers, 
 
} 
 

 
var map = L.map('map', options); 
 

 

 
var popup = L.popup(); 
 

 
function onMapClick(e) { 
 
    console.log("clicked on map"); 
 
    popup 
 
    .setLatLng(e.latlng) 
 
    .setContent("You clicked the map at " + e.latlng.toString()) 
 
    .openOn(map); 
 
} 
 

 
map.on('click', onMapClick);

#map { 
 
    height: 400px; 
 
}

<link href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" rel="stylesheet"/> 
 
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script> 
 
<div id="map"></div>

Answer 1

Если я правильно понимаю, ваш вопрос на странное поведение в вашем фрагменте кода:

1. Нажмите на карту, чтобы открыть всплывающее окно (в соответствии с вашим кодом).
2. Закройте всплывающее окно, нажав на его верхний правый крест.
3. Попробуйте открыть новое всплывающее окно где-нибудь, щелкнув по карте (теперь без всплывающих окон). => первый клик не запускает событие клика (следовательно, он не открывает всплывающее окно). Второй щелчок ведет себя как ожидалось (т. Е. Как на этапе 1). Если вы пропустите шаг 2, первый щелчок будет вести себя так, как ожидалось.

Возможно, это ошибка в листе в версии 0.6.4, которую вы используете.

Текущая стабильная версия 0.7.7, и она работает, как вы ожидаете для вашего случая:

// center of the map 
 
var ll = [-37.8136, 144.9631]; 
 
var layers = [ 
 
    // add the OSM layer 
 
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { 
 
    zoom: 18 
 
    }) 
 
] 
 

 
// map's options 
 
var options = { 
 
    center: ll, 
 
    zoom: 12, 
 
    scrollWheelZoom: false, 
 
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors', 
 
    layers: layers, 
 
} 
 

 
var map = L.map('map', options); 
 

 

 
var popup = L.popup(); 
 

 
function onMapClick(e) { 
 
    console.log("clicked on map"); 
 
    popup 
 
    .setLatLng(e.latlng) 
 
    .setContent("You clicked the map at " + e.latlng.toString()) 
 
    .openOn(map); 
 
} 
 

 
map.on('click', onMapClick);

#map { 
 
    height: 400px; 
 
}

<link href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" rel="stylesheet"/> 
 
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet-src.js"></script> 
 
<div id="map"></div>