帶有彈出式窗口的openlayers標記

Question

我試圖用標記顯示一個地圖。我希望能夠點擊這些標記，以便可以顯示額外的信息（類似於它在Google地球中的工作方式）。我有地圖和標記（或功能），但無法獲得帶有額外信息的「彈出窗口」。

的JS：

function init(){ 
    var northSeaLonLat = [4.25, 52.05]; 
    var centerWebMercator = ol.proj.fromLonLat(northSeaLonLat); 

    var tileLayer = new ol.layer.Tile({ source: new ol.source.OSM() }); 
    markerLayer = new ol.layer.Vector({ source: new ol.source.Vector({ features: [], projection: 'EPSG:3857' }) }); 


    var map = new ol.Map({ 
     controls: ol.control.defaults().extend([ 
      new ol.control.MousePosition({ 
       coordinateFormat: ol.coordinate.createStringXY(3), 
       projection: 'EPSG:4326', 
       undefinedHTML: ' ', 
       className: 'custom-mouse-position', 
       target: document.getElementById('custom-mouse-position'), 
      }) 
     ]), 
     layers: [tileLayer, markerLayer], 
     target: 'map', 
     view: new ol.View({ 
      projection: 'EPSG:3857', 
      center: centerWebMercator, 
      zoom: 7 
     }) 
    }); 

    // Add marker 
    var circle = new ol.style.Style({ 
     image: new ol.style.Circle({ 
      radius: 4, 
      fill: new ol.style.Fill({ 
       color: 'rgba(200,0,0,0.9)', 
      }), 
      stroke: new ol.style.Stroke({ 
       color: 'rgba(100,0,0,0.9)', 
       width: 2 
      }) 
     }) 
    }); 

    coordinates = [[4.25, 52.05], [4.21, 52.01], [4.29, 52.29], [5.25, 52.05], [4.25, 51.05]]; 
    for (i = 0; i < coordinates.length; i++) { 
     var feature = new ol.Feature(
      new ol.geom.Point(ol.proj.transform(coordinates[i], 'EPSG:4326', 'EPSG:3857')) 
     ); 
     feature.description = 'Coordinates: '+coordinates[i][0]+','+coordinates[i][1]+'\nBla'; 
     feature.setStyle(circle); 
     markerLayer.getSource().addFeature(feature); 
    } 

    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) { 
      popup.setPosition(evt.coordinate); 
      $(element).popover({ 
       'placement': 'top', 
       'html': true, 
       'content': feature.get('description') 
      }); 
      $(element).popover('show'); 
     } else { 
      $(element).popover('destroy'); 
     } 
    }); 
} 

我從網站上的例子有代碼：http://openlayers.org/en/v3.11.1/examples/icon.html

它的工作原理有，但我不能讓我的版本工作。任何想法爲什麼？

Answer 1

popover不是的OpenLayers的一部分，但包含在引導：http://getbootstrap.com/javascript/#popovers

也可參閱覆蓋了的OpenLayers例如：https://openlayers.org/en/latest/examples/overlay.html