javascript - 传单弹出窗口不会在第一次点击时打开

Question

我有一个函数可以创建一个标记并将弹出窗口绑定(bind)到它。我希望通过单击鼠标打开和关闭弹出窗口。发生的情况是弹出窗口不会在第一次点击时打开。第二次点击和所有后续点击都完成了这项工作。浏览器控制台中没有错误。可能是什么问题？

代码如下:

function addPlace() {
    var myIcon = L.icon({
        iconUrl: 'images/store.png',
        iconSize: [45, 47],
        iconAnchor: [22, 94],
        popupAnchor: [-3, -76],
    });

    var popup1 = L.popup()
        .setLatLng([32.07753, 34.76988])
        .setContent("Best shop<br>Food, drinks and more")

    var shop = L.marker([32.07714, 34.76988], {icon: myIcon})
        .on('click', function() { shop.bindPopup(popup1); })
        .addTo(mymap);
};

Answer 1

在您第一次单击之前，您不会绑定(bind)弹出窗口:

var shop = L.marker([32.07714, 34.76988], {icon: myIcon})
    .on('click', function() { shop.bindPopup(popup1); })

第一次点击绑定(bind)弹窗，因为弹窗在第一次点击前没有绑定(bind)，所以不会触发。

现在第二次单击可以激活弹出窗口，该弹出窗口现已绑定(bind)到标记。这就是需要点击两次的原因。

您可以在添加时将弹出窗口绑定(bind)到图层，来自 API 文档:

All layers share a set of methods convenient for binding popups to it.

var layer = L.Polygon(latlngs).bindPopup('Hi There!').addTo(map);
layer.openPopup(); layer.closePopup();

Popups will also be automatically opened when the layer is clicked on and closed when the layer is removed from the map or another popup is opened. (api docs)

因此您实际上不需要显式使用事件监听器。

因此，您应该能够:

var shop = L.marker([32.07714, 34.76988], {icon: myIcon})
    .bindPopup(popup1)
    .addTo(mymap);

如果在绑定(bind)时打开弹出窗口，您可以保留当前的实现:.on('click', function() { shop.bindPopup(popup1).openPopup(); }) ，但似乎没有必要每次点击都重新绑定(bind)它