带有弹出式窗口的openlayers标记

问题描述：

我试图用标记显示一个地图。我希望能够点击这些标记，以便可以显示额外的信息（类似于它在Google地球中的工作方式）。我有地图和标记（或功能），但无法获得带有额外信息的“弹出窗口”。带有弹出式窗口的openlayers标记

的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: '&nbsp;', 
       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

它的工作原理有，但我不能让我的版本工作。任何想法为什么？

你明白在你的JavaScript控制台的任何错误？ – chrki

如果我打开网页，然后不，但如果我点击我看到“popover不是一个功能”。我认为这是openlayers 3的一部分？ – Yorian

答

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

也可参阅覆盖了的OpenLayers例如：https://openlayers.org/en/latest/examples/overlay.html

带有弹出式窗口的openlayers标记

相关推荐