我试图在 OpenLayers 3 map 上放置一个简单的弹出窗口,但遇到了一个非常奇怪的错误。作为教程,我使用 http://openlayers.org/en/latest/examples/popup.html?q=popup ,我尝试对我自己的 map 实现几乎相同的解决方案。 map 初始化正确,但弹出窗口没有移动,我得到一个奇怪的 AssertionError: Assertion failed: element should be defined
当我点击 map 时,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);
});
}
初始化之前 map 的 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);
是引发此错误的行,就好像我将其注释掉一样,不会引发任何错误。
奇怪的是,如果我复制链接上找到的完全相同的代码,并在我自己的服务器上运行它,代码就会正确运行,没有错误。可能是什么问题呢?我做错了什么?
谢谢!
最佳答案
我的代码中有一个拼写错误。我打算在这一行中选择带有 popup
类的 DOM 元素:curMap.mapContainer.parent().find('popup').get(0)
,但我忘记了 popup 关键字之前的 .
,所以我选择了一个具有 popup 类型的 DOM 元素(当然没有)。
感谢乔纳塔斯·沃克的帮助:)
关于javascript - Openlayers 3 - 弹出窗口 - 奇怪的错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39165612/