Question

我使用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);
    }
}]);

Answer 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();
    }
});

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

Answer 2

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

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

单张弹出窗口第二次不起作用

2 个答案: