Question

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

以下是代码：

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

在第一次点击之前，您没有绑定弹出窗口：

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

第一次单击会弹出弹出窗口，因为弹出窗口在第一次单击之前没有绑定，它不会触发。

现在第二次点击可以激活弹出窗口，弹出窗口现在绑定到标记。这就是为什么需要两次点击。

您可以在API文档中将弹出窗口绑定到图层：

所有图层共享一组便于将弹出窗口绑定到它的方法。
var layer = L.Polygon(latlngs).bindPopup('Hi There!').addTo(map);
layer.openPopup(); layer.closePopup();
单击图层时，弹出窗口也会自动打开从地图或另一个弹出窗口中删除图层时关闭打开。（api docs）

因此，您无需显式使用事件侦听器。

因此，您应该能够：

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

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

单张弹出窗口在第一次单击时不会打开

1 个答案: