Javascript Error "Uncaught TypeError: element.popover is not a function" in Ruby on Rails 5

Question

我尝试将 geoJSON 层用于 geo.map.admin.ch API。（参见此处示例：http://codepen.io/anon/pen/qrGNvy?editors=0010）

效果很好。我也在本地主机上测试过。

但是当我将其传输到 Rails 框架上的 Ruby 时，出现错误“Uncaught TypeError: element.popover is not a function”。

我可能需要确定加载 js 文件的顺序。但即使将所有内容放入 index.html.erb 文件中，也会发生错误。

<div style="display: block;">
  <div id="popup" title="TubeCam Standort"></div>
</div>

<script src="http://api3.geo.admin.ch/loader.js?lang=en" type="text/javascript"></script>

<script type="text/javascript">

  var layer = ga.layer.create('ch.swisstopo.pixelkarte-farbe');
  var map = new ga.Map({
    target: 'map',
    layers: [layer],
    view: new ol.View({
      resolution: 50,
      center: [692266, 254661]
    })
  });

...

// Popup showing the position the user clicked
  var popup = new ol.Overlay({
    element: document.getElementById('popup')
  });
  map.addOverlay(popup);

  map.on('singleclick', function(evt) {
    var feature = map.forEachFeatureAtPixel(evt.pixel, function(feat, layer) {
      return feat;
    });
    var element = $(popup.getElement());
    element.popover('destroy');
    if (feature) {
      popup.setPosition(evt.coordinate);
      element.popover({
        'placement': 'top',
        'animation': false,
        'html': true,
        'content': feature.get('description')
      }).popover('show');
    }
  });

</script>

任何建议是什么问题？感谢您的帮助。问候

Answer 1

您需要加载 jquery 和 bootstrap:

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

查看笔设置。

Javascript Error "Uncaught TypeError: element.popover is not a function" in Ruby on Rails 5

Javascript Error "Uncaught TypeError: element.popover is not a function" in Ruby on Rails 5

javascript

jquery

ruby-on-rails

geojson

openlayers-3