引导弹出框"auto"位置应用不正确

Question

背景：我正在使用 OpenLayers V3 显示带有多个"标记/图标"的地图，以标记我要在地图上显示的地址的位置。每当用户将鼠标悬停在其中一个标记上时，我正在使用 javascript 显示弹出框（仅供参考"标记"弹出窗口显示标记位置的街道地址）。您将看到我将引导弹出框放置值设置为"auto top"，以确保将显示地图边缘附近的任何弹出框，以便它们不会从地图边缘跑出（即，被切断）。

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

示例 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

相关网页：

<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
});

您的弹出框代码可以简化很多。也许你想看看官方的OpenLayers 3 + Bootstrap Popover示例以获得灵感：http://openlayers.org/en/v3.3.0/examples/overlay.html。