openlayersのリンクでpopoverを使う方法

マーカーを使って地図を表示したいと思います。マーカーをクリックすると、ポップアップが表示されます。ポップアップには、外部Webサイトへのリンクも必要です。
これまでのところすべて正常に動作します。
しかし、最初のマーカ（ - >ポップアップが表示されます）をクリックしてすぐに2番目のマーカをクリックすると、すぐに2番目のマーカにポップアップが表示されて消えます！
私はそれがポップオーバーの "アニメーション"設定と関係があると思います。しかし、「アニメーション：false」を設定すると、リンクをもう使用できなくなります（クリックすることはできますが、要求されたウェブサイトは開かない）。ここでopenlayersのリンクでpopoverを使う方法

は私のコードが来る：

<!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>

出典

2017-11-22 Leon

その作業https://fiddle.jshell.net/marwat/acz9tLe1/3/ – SamaBalaYam

@Abid：フィドルは私のブラウザ（Firefoxの+クロム）で働いていません。 – Leon

問題はclickイベントが一緒にオーバーレイし、地図の作品です。イベントはOpenlayersでマップ上のすべての要素を通過します。オプションがOverlayの場合、これを防ぐことができます。

http://openlayers.org/en/latest/apidoc/ol.Overlay.html

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

出典

2017-11-23 01:29:41

ああ、これは動作します！（「アニメーション：偽」も設定すると）。ありがとう！ – Leon

openlayersのリンクでpopoverを使う方法

答えて

関連する問題