Всплывающие окна с навигационными вкладками не работают в openlayers 3 - PullRequest
Новая
       12

Всплывающие окна с навигационными вкладками не работают в openlayers 3

0 голосов
/ 10 января 2019

У меня есть карта с openlayers3, сделанная с ol3-gm, и маркер в ней. У этого маркера есть всплывающее окно, в котором я использовал примеры openlayers, все работает отлично. Проблема во всплывающем окне. Это было сделано с помощью навигационных вкладок из начальной загрузки. Он отлично работает, когда он отделен от проекта, но когда он находится во всплывающем окне маркера, он не работает. Всплывающее окно открывается нормально, но вкладки не работают. В чем проблема всплывающих окон? Есть ли конфликт с openlayers с начальной загрузкой?

Я использую загрузчик 3.3.7 и jQuery 3.3.1

Я уже пробовал:

1 - Я сделал функции событий кликов с jQuery на вкладках, чтобы открыть их вручную, но это не сработало, проблема продолжилась.

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, но не в моем проекте)

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

...