javascript - OpenLayers 不允许我添加 Popup

Question

所以我有(或曾经有)OpenStreetMaps 的工作版本，但现在我想在 map 上添加弹出窗口，整个事情就中断了。这是与弹出窗口问题相关的代码。疯狂的是，我从官方 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 );

}

我的浏览器控制台中出现的问题是:

我已经删除了我认为与此问题无关的代码，但如果有必要，我可以提供更多内容。我在谷歌上进行了广泛的搜索，发现我访问的网站上的所有示例都工作正常，但破坏了我的 map ，而其他人的每个 StackOverflow 答案似乎都适合原始海报，但再一次破坏了我的 map 。

这是我尝试复制的网站之一:

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

我非常渴望解决这个问题，任何帮助将不胜感激。谢谢!

-C.J.

Answer 1

真正了解 OL API 的人将能够正确解释这一点，但基本上，您的代码很好，但您需要重新排序。您需要添加 map 图层并缩放到一定程度，然后才能调用 addPopup。我认为这是因为 addPopup 不需要自己的显式层；它使用 map 图层；因此，在尝试使用 map 之前，您需要在 map 上添加 map 图层。这是有道理的，但我不确定为什么您还需要调用 Zoom/zoomToExtent 函数。

这是一个 fiddle ，我尝试让您的代码尽可能保持不变:

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);
}