Bootstrap Popover“自动”放置应用不正确

Question

背景： 我正在使用 OpenLayers V3 显示带有多个“标记/图标”的地图，以标记我想在地图上显示的地址的位置。每当用户将鼠标悬停在其中一个标记上时，我都会使用 javascript 显示一个弹出框（仅供参考“标记”弹出框显示标记位置的街道地址）。您会看到我将引导弹出框放置值设置为“自动顶部”，以确保显示地图边缘附近的任何弹出框，以免它们超出地图边缘（即，获取隔断）。

问题： 当其中一个标记靠近地图的顶部边缘时，“自动顶部”放置设置会正确调整该“标记”弹出框的位置，使其保持可见（即，弹出框显示在标记的底部）但不幸的是所有地图上的其他“标记”似乎不必要地“继承”了这个“底部位置”。结果，这会导致页面底部附近的“标记”具有它们的弹出窗口截止。

示例 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 (e.g., 'renter')
      // and then immediately clicking on another marker (e.g, 'rental')  caused the wrong popup
      // content to appear on the newly clicked marker (e.g., popup displayed 'renter' rather than
      // rental). The line below uses jQuery method .attr to put the value of the newly clicked
      // marker value (i.e., name) into the HTML in the location that bootstrap pull the
      // the popup value (i.e., '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'。为了确保您的弹出框可见，您可能需要将ol.Overlay 配置为将autoPan 选项设置为true。所以一个有效的覆盖配置应该是这样的：

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。