Bootstrap Popover“自動”放置不正確

Question

背景：我正在使用OpenLayers V3來顯示帶有多個“標記/圖標”的地圖，以標記要顯示在地圖上的地址的位置。 每當用戶將鼠標懸停在一個標記上時，我就會使用javascript顯示一個彈出窗口（Fyi“標記”彈出窗口顯示該標記位置的街道地址）。 您會看到我將引導程序彈出窗口放置值設置為“自動頂部”，以確保將顯示地圖邊緣附近的所有彈出窗口，以使它們不會從地圖邊緣溢出（例如，隔斷）。

問題：當其中一個標記位於地圖的頂部邊緣附近時，“自動頂部”放置設置會正確調整該“標記”的彈出框的位置，使其保持可見（即，彈出框顯示在標記的底部），但是不幸的是，地圖上的所有其他“標記”似乎都不必要地“繼承”了這種“底部位置”。 結果，這導致頁面底部附近的“標記”的彈出窗口被截斷。

示例Javacript代碼：

注意：這里有很多代碼，但我認為最好將其全部包含在內，而不是遺漏可能與解決該問題有關的內容。 另外，我應該注意，JavaScript是“喂”一個看起來如下的對象：

 {'pintype1.filename.png': ["Address", [Longitude,Latitude]], ["Address", [Longitude,Latitude]], etc., etc. 'pintype2.filename.png': ["Address", [Longitude,Latitude]], ["Address", [Longitude,Latitude]] etc., etc., } 

drawmap javascript代碼中的嵌套循環用於遍歷此對象並在OpenLayers軟件中設置/保存值。

 window.RentMyThing = window.RentMyThing || {} window.RentMyThing.drawMap = function drawMap (mapAttributesPlus) { var popuplabel = ''; var iconLocations = []; var vectorSource = new ol.source.Vector({ //create empty vector -- not sure if this is needed?????? }); $('.map').html(''); // Outer Loop to retrieve each pin type Object.keys(mapAttributesPlus).forEach(function(pinType) { // Inner Loop to retrieve all coordinates associated with each pin type mapAttributesPlus[pinType].forEach(function(coords) { var iconLocation = ol.proj.transform([coords[1][0], coords[1][1]], 'EPSG:4326', 'EPSG:3857') iconLocations.push(iconLocation) popupLabel = coords[0] console.log("Address: " + coords[0] + "Lon/Lat: " + coords[1][0] + ', ' + coords[1][1]); var iconFeature = new ol.Feature({ geometry: new ol.geom.Point(iconLocation), // Added line for popup name: popupLabel }) // Create Pin styling iconFeature.setStyle( new ol.style.Style({ image: new ol.style.Icon({ anchor: [0.2, 1], anchorXUnits: 'fraction', anchorYUnits: 'pixels', opacity: 0.75, src: pinType // Set pin type }) }) ) iconFeature.on('mouseover', function() {alert('hover')}) vectorSource.addFeature(iconFeature); }) // End of inner loop - coords }); // End of outer loop - pinType // *************Create Vector Layer with Markers and Build Map *************************** var vectorLayer = new ol.layer.Vector({ source: vectorSource // style: iconStyle }); var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ title: "Rental Proximity Map", source: new ol.source.MapQuest({layer: 'osm'}) }), vectorLayer], view: new ol.View({ center: iconLocations[0], // ??? Do i need a centering point at this point. zoom: 12 }), controls: ol.control.defaults({ attributionOptions: { collapsible: false }}).extend([ new ol.control.ScaleLine() ]) }); // Bound the map if multiple points var view = map.getView() var extent = ol.extent.boundingExtent(iconLocations) var size = map.getSize() view.fitExtent(extent, size) // If only one coordinate then binding map on that one point will produce // a map that is zoomed in so close it will appear that no map is displayed // so we want to prevent the map zoom from going to high hence "if statement below" if (view.getZoom() > 16) { view.setZoom(16); } Window.map = map; // *********************************************** // Popup logic // http://openlayers.org/en/v3.0.0/examples/icon.js // *********************************************** // The line below is required to get popup to appear var element = $('.popup').first(); var popup = new ol.Overlay({ element: element, positioning: 'auto top', stopEvent: false }); map.addOverlay(popup); var showing; // display popup on click map.on('pointermove', function(evt) { var feature = map.forEachFeatureAtPixel(evt.pixel, function(feature, layer) { return feature; }); if (feature) { // Showing flag was added to remove popover from flickering when the mouse is hovered over the // icon/marker and there is incidental/minor movement in the mouse. Setting the show flag ensures // that you don't attempt to redraw the popup over and over (and get flickering) with minor mouse // movements if (! showing) { showing = true; var name = feature.get('name') var geometry = feature.getGeometry(); var coord = geometry.getCoordinates(); // Next line Added for testing // var element = $('.popup').this popup.setPosition(coord); // The line below fixed the scenario where clicking on one marker (eg, 'renter') // and then immediately clicking on another marker (eg, 'rental') caused the wrong popup // content to appear on the newly clicked marker (eg, popup displayed 'renter' rather than // rental). The line below uses jQuery method .attr to put the value of the newly clicked // marker value (ie, name) into the HTML in the location that bootstrap pull the // the popup value (ie, 'data-content') $(element).attr('data-content', name) $(element).popover({ 'trigger': 'hover click', 'placement': 'auto top', 'html': true, 'content': name, // Had to add container to make "auto" placement work properly }); $(element).popover('show'); } } else { showing = false; $(element).popover('destroy'); } }); // change mouse cursor when over marker map.on('pointermove', function(e) { if (e.dragging) { $(element).popover('destroy'); return; } var pixel = map.getEventPixel(e.originalEvent); var hit = map.hasFeatureAtPixel(pixel); var target = document.getElementById(map.getTarget()); target.style.cursor = hit ? 'pointer' : ''; }); } // End of drawmap function 

相關HTML：

 <div id="map" class="map"> <div class="popup" data-trigger="hover" data-toggle="popover" data-original-title="" title="" data-placement=""></div> </div> 

相關CSS：

 div#map { height: 400px; width: 512px; } .popover{ width:160px; height:70px; } 

嘗試確定為什么我看到上面的“ 問題摘要”中提到的行為。

干杯。

Answer 1

'auto top'不是ol.Overlay的有效放置選項。 有效選項是'bottom-left' ， 'bottom-center' ， 'bottom-right' ， 'center-left' ， 'center-center' ， 'center-right' ， 'top-left' ， 'top-center' ， 'top-right' 。 為確保彈出窗口可見，您可能需要將autoPan選項設置為true來配置ol.Overlay 。 因此，有效的疊加層配置應如下所示：

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

您的Popover代碼可以簡化很多。 也許您想看一下OpenLayers 3 + Bootstrap Popover官方示例以獲取靈感： http ://openlayers.org/en/v3.3.0/examples/overlay.html。