2016-08-26 5 views
1

OpenLayers 3지도에 간단한 팝업을 넣으려고하는데 아주 이상한 오류가 발생합니다. 자습서로, 나는 http://openlayers.org/en/latest/examples/popup.html?q=popup을 사용하고 있었고 거의 동일한 솔루션을 내지도에 구현하려고했습니다. 지도가 올바르게 초기화되지만 팝업이 이동되지 않고지도를 클릭하면 이상한 AssertionError: Assertion failed: element should be defined 자바 스크립트 오류가 발생합니다. 여기 Openlayers 3 - 팝업 이상한 오류

내가 사용하는 코드입니다 :

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>에서 오는 것을 말한다 location, but 나는이 오류를 발생시키는 행인 curMap.overlayPopup.setPosition(coordinate);입니다. 주석으로 처리하면 오류가 발생하지 않습니다.

이상한 점은 링크에서 발견 된 코드와 정확히 같은 코드를 복사하여 내 서버에서 실행하면 코드가 오류없이 올바르게 실행된다는 것입니다. 무엇이 문제 일 수 있습니까? 내가 도대체 ​​뭘 잘못하고있는 겁니까?

감사합니다.

+1

'CONSOLE.LOG의 출력 '무엇을 (curMap.mapContainer.parent은(). ('팝업 ')를 찾을 수는. (0)를 얻을)이야? –

답변

1

내 코드에 오타가있었습니다. 이 줄에 popup 클래스의 DOM 요소를 선택하려고했는데 curMap.mapContainer.parent().find('popup').get(0‌​)이지만 팝업 키워드 앞에 .을 잊어 버렸기 때문에 팝업 유형이있는 DOM 요소를 선택하고있었습니다 (거기에는 아무 것도 없었습니다). 도움을 Jonatas 워커

감사합니다 :)