Openlayers功能选择区域已偏移

Question

I have this very odd problem, where the selection box shifts further and further down the closer the marker is to the bottom of the map.

If the marker is at the very top of the map the selection box is right on top of the marker, but if it's further down the map I have to click further and further under the marker to select it.

Has anyone else experienced this? I'm using Openlayers 4.1.1. Here are some code chunks that could be relevant (I'm more than happy to share more code if that can help!):

    var imageStyleFunction = function (feature, resolution) {
        if (feature.iconSrc) {
            var anchorX = feature.anchorX ? feature.anchorX : 0.5;
            var anchorY = feature.anchorY ? feature.anchorY : 0.5;
            return [new ol.style.Style({
                image: new ol.style.Icon({
                    src: feature.iconSrc,
                    anchor: [anchorX, anchorY]
                })
            })];
        }
    };

...

    markerLayer = new ol.layer.Vector({
        source: new ol.source.Vector(),
        style: imageStyleFunction
    });

...

    selectionInteraction = new ol.interaction.Select({
        condition: ol.events.condition.click,
        //hitTolerance: 20,
        style: imageStyleFunction
    });

    selectionInteraction.on('select', function (e) {
        var userLocationFeature = _.find(e.target.getFeatures().getArray(),
        function (feature) {
            return feature.markerType === "userLocation";
        });

        if (userLocationFeature) {
            store.commit("setSelectedUserLocation", userLocationFeature);
        } else {
            store.commit("setSelectedUserLocation", null);
            selectionInteraction.getFeatures().clear();
        }
    });

...

function createMarker(location, iconFile, markerType, markerId) {
    var markerLayerSource = markerLayer.getSource();
    var markerFeature = new ol.Feature({
        geometry: new ol.geom.Point(transformLonLat(location.longitude, location.latitude))
    });
    markerFeature.iconSrc = app.config.map.iconPath + iconFile;
    if (markerType) {
        markerFeature.markerType = markerType;
    }

    if (markerId) {
        markerFeature.markerId = markerId;
    }

    markerLayerSource.addFeature(markerFeature);
}

Answer 1

Mick's own solution by calling map.updateSize() solved it for me also. I haven't investigated it more closely but I'm assuming it has to do with sizes changing during init of my ionic app. It's a quick fix to a more difficult problem at least.