OpenLayers不允許我添加彈出窗口

Question

因此，我擁有（或擁有）OpenStreetMaps的工作版本，但是現在我想在地圖上添加彈出窗口，整個過程就壞了。 這是與彈出窗口有關的代碼。 瘋狂的事情是，我復制並粘貼了來自官方Wiki的代碼，以便得到一個可行的示例。

function init() {

    map = new OpenLayers.Map( 'heatmapArea');

    var query = new OpenLayers.LonLat(-122.2928337167, 37.5549570333).transform(
                  new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
    var popup = new OpenLayers.Popup.FramedCloud("Popup", query, null, "Text", null, true);
    map.addPopup(popup, false);

    var lat = 39.3138895;
    var lon = -98.2233523;
    var zoom = 4;
    var position = new OpenLayers.LonLat(lon, lat).transform( EPSG_WGS84, EPSG_900913);
    map.setCenter(position, zoom );

}

在我的瀏覽器控制台中出現的問題是：

我已刪除了與該問題無關的代碼，但是如果有必要，我可以提供更多代碼。 我到處搜尋了很多例子，但我在訪問的網站上找到的所有示例都可以正常工作，但是破壞了我的地圖，對於其他人的每一個StackOverflow答案對於原始海報似乎都行得通，但又一次破壞了我的地圖。

這是我嘗試復制的網站之一：

http://www.rigacci.org/openlayers/other_examples/markers.html

我非常渴望解決此問題，我們將不勝感激。 謝謝！

-CJ

Answer 1

真正了解OL API方式的人將能夠正確解釋這一點，但是基本上，您的代碼很好，但是您需要對其重新排序。 您需要先添加地圖圖層並縮放一定程度，然后才能調用addPopup。 我認為這是因為addPopup不需要自己的顯式層。 它使用地圖圖層； 因此您在使用地圖之前需要在地圖上放置一個地圖圖層。 這是有道理的，但是我不確定為什么還需要調用zoom / zoomToExtent函數。

這是一個小提琴，我試圖讓您的代碼盡可能保持不變：

http://jsfiddle.net/sifriday/u3j6h97d/3/

這是帶有一些注釋的JS：

function init() {

    var map = new OpenLayers.Map( 'heatmapArea');
    // Add a map layer before trying to use addPopup
    map.addLayer(new OpenLayers.Layer.OSM());

    // Call the zoom function before trying to use addPopup
    var lat = 39.3138895;
    var lon = -98.2233523;
    // I've changed the zoom to 1 so you can immediately see the popup in the small fiddle window
    var zoom = 1;
    var position = new OpenLayers.LonLat(lon, lat).transform(
        "EPSG_WGS84", "EPSG_900913"
    );
    map.setCenter(position, zoom);

    // Finally here's your addPopup code
    var query = new OpenLayers.LonLat(
        -122.2928337167, 37.5549570333
    ).transform(
        new OpenLayers.Projection("EPSG:4326"), 
        map.getProjectionObject()
    );
    var popup = new OpenLayers.Popup.FramedCloud(
        "Popup", 
        query,
        // I added a size to make it fit in the small fiddle window
        new OpenLayers.Size(100,100),
        "Text",
        null,
        true
    );
    map.addPopup(popup);
}