关闭leafletjs中的弹出窗口后单击事件未触发

Question

我将 leafletjs 与 Openstreetmaps 一起使用，并在点击时显示弹出窗口。

如果我点击地图弹出窗口。

但是为什么如果我先关闭当前弹出窗口，点击事件不会被触发？（在那种情况下，我需要在地图上点击两次才能打开一个新的弹出窗口）

// 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

如果我没理解错的话，你的问题是关于你的代码段中的一个奇怪行为：

点击地图上的某处打开一个弹出窗口（根据您的代码）。
单击右上角的十字关闭弹出窗口。
尝试通过单击（现在 popup-free）地图在某处打开一个新的弹出窗口。 => 第一次点击不会触发点击事件（因此不会打开弹出窗口）。第二次单击会按预期运行（即与第 1 步一样）。如果您跳过第 2 步，第一次点击会按预期运行。

这可能是您正在使用的 Leaflet 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>

关闭leafletjs中的弹出窗口后单击事件未触发

Click event not firing after closing pop-up in leafletjs

javascript

leaflet