Обновление или уничтожение всплывающих окон в openlayers3

Question

Я пытаюсь создать карту с openlayers3 с группой маркеров и всплывающих окон. Маркеры и всплывающие окна работают до сих пор, но когда я нажимаю на один маркер (всплывающее окно отображается), а затем - без щелчка на карте снова - на другом, отображается всплывающее окно с тем же содержимым, что и первое. Я уже занимался исследованиями, но не могу найти что-то полезное. Итак, вот часть моих всплывающих окон:

//popup 
var element = document.getElementById('popup'); 

var popup = new ol.Overlay({ 
    element: element, 
    positioning: 'bottom-center', 
    stopEvent: false 
}); 

map.addOverlay(popup); 

// display popup on click 
map.on('click', function(evt) { 
    var feature = map.forEachFeatureAtPixel(evt.pixel, 
     function(feature, layer) { 
     return feature; 
     });  

    if (feature) { 
    var geometry = feature.getGeometry(); 
    var coord = geometry.getCoordinates(); 
    popup.setPosition(coord); 
    $(element).popover({ 
     'placement': 'top', 
     'html': true, 
     'content': feature.get('information') 
    }); 
    $(element).popover('show'); 
    } else { 
    $(element).popover('destroy'); 
    } 
}); 

Надеюсь, кто-то может мне помочь. Благодаря!

Answer 1

Я сделал для вас пример. Взглянуть!

Вы должны «написать» некоторый контент на каждом маркере.

http://embed.plnkr.co/hhEAWk/preview

Answer 2

У меня был тот же вопрос, и нашел свое решение здесь https://gis.stackexchange.com/questions/137561/openlayers-3-markers-and-popovers

Попробуйте изменить

$(element).popover({ 
    'placement': 'top', 
    'html': true, 
    'content': feature.get('information') 
}); 

в

$(element).attr('data-placement', 'top'); 
$(element).attr('data-html', true); 
$(element).attr('data-content', feature.get('information'));