Openlayers 3 - 弹出窗口 - 奇怪的错误

Question

我试图在 OpenLayers 3 地图上放置一个简单的弹出窗口，但我运行遇到了一个非常奇怪的错误。作为教程，我使用的是 http://openlayers.org/en/latest/examples/popup.html?q=popup ，我尝试对我自己的地图实施几乎相同的解决方案。地图正确初始化，但弹出窗口未移动，当我单击我的地图时出现奇怪的 AssertionError: Assertion failed: element should be defined javascript 错误。

这是我使用的代码：

function Map(map) {
  var zoom=map.data('zoom'), center = map.data('center'), locations = map.data('locations'), nodes = map.data('nodes'), curMap = this;

  this.mapContainer=map;
  this.vectorSource = new ol.source.Vector({});
  this.map = null;
  this.polygons = {};
  this.locations = {};
  this.overlayPopup = new ol.Overlay(/** @type {olx.OverlayOptions} */ ({
    element: curMap.mapContainer.parent().find('popup').get(0),
    autoPan: true,
    autoPanAnimation: {
        duration: 250
    }
  }));

  if (center == '') center=[0,0];
  if (zoom == '') zoom=12;
  center=ol.proj.transform(center, 'EPSG:4326', 'EPSG:3857');

  this.mapContainer.addClass('map-inited');
  this.map =  new ol.Map({
    layers: [
      new ol.layer.Tile({
          source: new ol.source.OSM()
      }),
      new ol.layer.Vector({
          source: this.vectorSource
      })
    ],
    overlays: [this.overlayPopup],
    target: this.mapContainer.attr('id'),
    view: new ol.View({
      center: center,
      zoom: zoom
    })
  });

  this.map.on("singleclick", function(evt) {
    var coordinate = evt.coordinate;

    var features=[];
    curMap.map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
        features.push(feature);
    });
    console.log(features);

    curMap.overlayPopup.setPosition(coordinate);
});

}

地图的 HTML 在初始化之前看起来像这样：

<div class="venture-map" style="" id="div-BCD82D60-27AE-CCBB-DF40-2AFFB1D4A5F9">
  <div class="map" style="" id="div-39529A9B-6C0C-2F36-5691-9F1A7BFA7878" data-locations="...." data-nodes="..." data-center="..." data-zoom="12"></div>
  <div class="popup" style="" id="div-3716827E-9A13-0912-EF0E-66B0E6E72145">
    <div id="popup-content"></div>
  </div>
</div>

控制台说错误来自 <unknown> 位置，但我确定 curMap.overlayPopup.setPosition(coordinate); 是引发此错误的行，就好像我将其注释掉一样，没有引发错误.

奇怪的是，如果我复制在 link 上找到的完全相同的代码，并且在我自己的服务器上运行它，代码运行s 正确，没有错误。可能是什么问题呢？我做错了什么？

谢谢！

Answer 1

我的代码中有错字。我打算在这一行 class popup select DOM 元素：curMap.mapContainer.parent().find('popup').get(0‌)，但我忘记了弹出关键字前的 . ，所以我 selecting 了一个 DOM 类型的弹出窗口元素（当然有 none）。

感谢 Jonatas Walker 的帮助:)

Openlayers 3 - 弹出窗口 - 奇怪的错误

Openlayers 3 - popup - strange error

javascript

openlayers-3