背景 我正在使用OpenLayers V3 来显示带有多个“标记/图标”的地图,以标记我想要在地图上显示的地址的位置。当用户将鼠标悬停在其中一个标记上时,我正在使用javascript显示一个弹出窗口(fyi“marker”popover显示标记位置的街道地址)。你会看到我将bootstrap popover放置值设置为“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
相关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; }
尝试找出我在问题摘要中看到上述行为的原因。
干杯。
答案 0 :(得分: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
选项设置为true来配置autoPan
。因此,有效的叠加配置如下所示:
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。