Question

我想显示带有标记的地图。当我点击标记时，我想显示一个弹出窗口。在弹出窗口中还应该有一个指向外部网站的链接。
到目前为止一切正常但是当我点击第一个标记（ - >显示弹出窗口）并且之后直接点击第二个标记时，弹出窗口仅在第二个标记上显示，然后消失！
我认为它与＆＃34;动画＆＃34;有关。设置弹出窗口。但是当我设置＆＃34; animation：false＆＃34;时，我就不能再使用这些链接了（我可以点击它们，但是它们不会打开所请求的网站）。

我的代码来了：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Popup</title>
        <link rel="stylesheet" href="https://openlayers.org/en/v4.5.0/css/ol.css" type="text/css">
        <script src="https://openlayers.org/en/v4.5.0/build/ol.js"></script>
        <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div id="map" class="map"></div>
        <div id="popup"></div>

        <script>
            var place_0 = new ol.Feature({
                geometry: new ol.geom.Point(ol.proj.fromLonLat([1.1, 50])),
                name: 'placename 1<br><a target="_blank" href="http://www.fairtragen.de">link1</a>'
            });

            var place_1 = new ol.Feature({
                geometry: new ol.geom.Point(ol.proj.fromLonLat([1.2, 50])),
                name: 'placename 2<br><a target="_blank" href="http://www.fairtragen.de">link2</a>'
            });

            var vectorSource = new ol.source.Vector({
                features: [place_0, place_1]
            });

            var vectorLayer = new ol.layer.Vector({
                source: vectorSource
            });

            var rasterLayer = new ol.layer.Tile({
                source: new ol.source.OSM()
            });

            var map = new ol.Map({
                layers: [rasterLayer, vectorLayer],
                target: document.getElementById('map'),
                view: new ol.View({
                    center: ol.proj.fromLonLat([1.1, 50]),
                    zoom: 10
                })
            });


            var element = document.getElementById('popup');

            var popup = new ol.Overlay({
                element: element,
                stopEvent: false
            });
            map.addOverlay(popup);


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

                var feature = map.forEachFeatureAtPixel(evt.pixel,
                        function (feature) {
                            return feature;
                        });

                if (feature) {
                    var iname = feature.get('name');
                    var coordinates = feature.getGeometry().getCoordinates();
                    popup.setPosition(coordinates);

                    $(element).popover({
                        'animation': true,
                        'html': true,
                        //'delay': 1000,
                        'content': iname
                    });
                    $(element).popover('show');
                } else {
                    $(element).popover('destroy');
                }
            });

        </script>
    </body>
</html>

Answer 1

问题是click事件适用于叠加层和地图。事件使用Openlayers传递到地图上的每个元素。您可以使用stopEvent上的Overlay选项阻止此操作。

https://openlayers.org/en/latest/apidoc/module-ol_Overlay-Overlay.html

var popup = new ol.Overlay({
  element: element,
  stopEvent: true
});

如何在openlayers中使用带有链接的popover

1 个答案: