2016-08-26 7 views
1

OpenLayers 3マップに単純なポップアップを入れようとしていますが、私は非常に奇妙なエラーに遭遇しています。チュートリアルとして、http://openlayers.org/en/latest/examples/popup.html?q=popupを使用していましたが、私は自分のマップにほぼ同じソリューションを実装しようとしました。マップは正しく初期化されますが、ポップアップは移動せず、マップをクリックすると奇妙なAssertionError: Assertion failed: element should be defined JavaScriptエラーが発生します。ここでOpenlayers 3 - popup-strangeエラー

は、私が使用するコードです:マップの

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);は、私はそれをコメントアウトする場合、エラーが発生しないように、このエラーを発生させる行です。

奇妙なことは、リンク上にある同じコードを正確にコピーして自分のサーバーで実行すると、コードはエラーなしで正しく実行されるということです。何が問題なの?私は間違って何をしていますか?

ありがとうございます!

+1

'にconsole.logの出力は何(curMap.mapContainer.parent()。)( 'ポップアップ' を見つける。(0)を取得)'? –

答えて

1

私のコードに誤字がありました。私はこの行のクラスpopupでDOM要素を選択しようとしていましたが、curMap.mapContainer.parent().find('popup').get(0‌​)がポップアップキーワードの前に.を忘れてしまったので、ポップアップの種類を持つDOM要素を選択していました。助けのためのJonatasウォーカーのための

感謝:)

関連する問題