Question

我有一张带有ol3-gm的openlayers3的地图，里面有一个标记。这个标记有一个弹出窗口，其中使用了openlayers示例，一切正常。问题出在弹出窗口中。它是使用引导程序中的nav-tabs完成的。当它与项目分离时，它可以完美地工作，但是当放置在标记的弹出窗口中时，它将无法工作。弹出窗口正常打开，但是选项卡不起作用。弹出问题是什么？引导程序是否存在任何openlayers冲突？

我正在使用bootstrap 3.3.7和jQuery 3.3.1

我已经尝试过：

1-我已经使用选项卡上的jQuery完成了click事件功能，以手动打开它们，但是它不起作用，问题仍然存在。

2-我还尝试了其他方式来创建弹出窗口，例如引导弹出窗口。什么都没改变。

地图代码（效果很好）

// Mapa de Satelite
var googleLayer = new olgm.layer.Google({
    mapTypeId: google.maps.MapTypeId.SATELLITE
});
// criação do mapa
var map = new ol.Map({
    interactions: olgm.interaction.defaults(),
    layers: [
        googleLayer,            // Camada Goolgle maps
        vectorBetimBranco
    ],
    target: document.getElementById('map'),

    controls: ol.control.defaults({

        collapsible: false,
        zoom: false,
        attribution: false,
        rotate: false

    }),
    view: new ol.View({
        center: [-4919247.25998, -2266063.6466],
        zoom: 12,
        minZoom: 5,
        maxZoom: 19,
        projection: 'EPSG:3857'
    })
});
// Activate the library
var olGM = new olgm.OLGoogleMaps({ map: map });
olGM.activate();

CSS

.map {
    position: absolute;    
    height: 100%;
    width: 100%;
}

body {
    margin: auto;
}

.popover{
    max-width: 434px;
}

标记代码（效果很好）

var vetorCoordenadas = new ol.source.Vector({});

mark1 = new ol.Feature({
    geometry: new ol.geom.Point([-4919247.25998, -2266063.6466]),
    type: "contrapartida"
});

// icone
m1style = new ol.style.Style({
    image: new ol.style.Icon({
        anchor: [0.4, 38],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        src: 'img/mark2.PNG'
    })
});

mark1.setStyle(m1style);
vetorCoordenadas.addFeature(mark1);

var vetorAlvaras = new ol.layer.Vector({
    name: 'vetorAlvaras',
    source: vetorCoordenadas
});

map.addLayer(vetorAlvaras);

弹出事件代码

var element = document.getElementById('popup');
var popup = new ol.Overlay({
    element: element,    
    stopEvent: true,
    autoPan:true,
    autoPanAnimation: {
        duration: 250
    }
});
map.addOverlay(popup);

// display popup on click
map.on('singleclick', function (evt) {
    $(element).popover('destroy');

var feature = map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
    if (layer.get('name') === 'vetorAlvaras') {
        return feature;
    }
});

if (feature.get('type') === "contrapartida") {
    var coordinates = evt.coordinate;
    popup.setPosition(coordinates);

    $(element).popover({
        'html': true,
        'placement': "top",
        'animation':false,
        'content': $('#popoverContent').html()
    });

    $(element).popover('show');

    } else {
        $(element).popover('destroy');
    }
});

弹出窗口代码（JSFiddle中的Workinh，但不在我的项目中）

https://jsfiddle.net/nathanfrduarte/5mL6esz2/

带有导航选项卡的弹出窗口在openlayers 3中不起作用

0 个答案: