Question

我使用带有Openstreetmaps的leafletjs并在点击时显示弹出窗口。

如果我点击地图弹出窗口就会打开。

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

＆＃13;

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

＆＃13;

#map {
  height: 400px;
}

＆＃13;

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

＆＃13;

Answer 1

如果我理解正确，那么您的问题就在于您的代码段中的一个奇怪行为：

点击地图上的某个位置以打开弹出窗口（根据您的代码）。
点击右上方的十字架关闭弹出窗口。
点击（现在没有弹出式）地图，尝试在某处打开一个新的弹出窗口。 =＆GT;第一次单击不会触发click事件（因此它不会打开弹出窗口）。第二次点击表现得如预期的那样（即在步骤1中）。如果跳过第2步，则第一次单击将按预期运行。

这可能是您正在使用的版本0.6.4中的Leaflet中的错误。

目前的稳定版本是0.7.7，它可以按照您的预期工作：

＆＃13;

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

＆＃13;

#map {
  height: 400px;
}

＆＃13;

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

＆＃13;

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

1 个答案: