传单弹出窗口第二次不起作用答案

【问题标题】：Leaflet popup doesn't work second time传单弹出窗口第二次不起作用
【发布时间】：2018-07-12 13:32:18
【问题描述】：

我使用 for 循环在地图上创建了标记。单击标记弹出窗口时打开。第二次单击后，标记弹出窗口未打开。 $scope.resSearchAnnouncement 有 JSON 数据。我该如何解决这个问题？

var ngApp = angular.module('test', ['']);
window.ngApp.controller('controllerHome', ['$scope', '$controller', '$location',
function ($scope, $controller, $location) {
        $scope.map = L.map('map', {
            zoomControl: true,
            maxZoom: 18,
            minZoom: 0
        }).setView([$scope.lat, $scope.lng], 13);
        $scope.map.zoomControl.setPosition('bottomright');
        L.tileLayer('https://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}', {
            subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
        }).addTo($scope.map);
        $scope.marker = L.marker($scope.map.getCenter(), {
            draggable: true,
            icon: L.icon({
                iconUrl: '/assets/img/pin-4ldpi.png',
                iconSize: [30, 35],
                iconAnchor: [30 / 2, 35],
            })
        }).addTo($scope.map);
  for (var i = 0; i < $scope.resSearchAnnouncement.length; i++) {
        var icon = "";
        announcementMarker.id = $scope.resSearchAnnouncement[i].id;
        announcementMarker.annoInfo = $scope.resSearchAnnouncement[i];
        announcementMarker.on('click', function () {
            if (this._popup == undefined) {                                     
                content = '<div class="d-block color1-lighten-15 p-2"><span class="mb-2 d-block">' +
                    '<span class="mb-2 d-block color2-lighten-3 p-2"><strong>' + this.annoInfo.status + ' ' + this.annoInfo.category + ' / ' + this.annoInfo.subcategory + ' </strong></span>' +                        
                    '<span class="d-block pl-2"><strong>Tarih </strong>: ' + $scope.dateFormatter(this.annoInfo.anndate) + ' </span>'
                '</div>';
                this.bindPopup(content).openPopup();
            } else {
                this.openPopup();
            }
        });
        $scope.markerClusters.addLayer(announcementMarker);
    }
}]);

【问题讨论】：

是announcementMarker 是一个标记实例吗？

标签： javascript angular leaflet

【解决方案1】：

var marker = L.marker([51.505, -0.09], {});
marker.addTo(map);
marker.bindPopup('popup content');

marker.on('click', function () {
    if (!this._popup) { // when maker dont have pop up, this will bind popup and and open it
        this.bindPopup('Popup content').openPopup();
    }
});

我已为您创建了此示例，请检查希望对你有帮助！

【讨论】：

【解决方案2】：

Popup 有一个onClose 属性，你应该声明如下（在此之前我个人使用useState 钩子作为标记标签的onClick 属性）

onClose={() => {
  setXxx(null);
}}

【讨论】：