OpenLayers不允许我添加弹出窗口

Question

So I have (or had) a working version of OpenStreetMaps, but now that I want to add popups onto the map, the whole thing breaks. This is the code pertaining to the issue of the popup. The crazy thing is that I copy and pasted the code from the official wiki in order to just get a working example.

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

}

The issue as it appears in my browser console is:

I have removed the code which I don't think is relevant to this issue but I could provide more if that is necessary. I have googled around extensively and all of the examples that I find work fine on the website I visit, but breaks my map and every StackOverflow answer to somebody else seems to work fine for the original poster, but once again, breaks my map.

Here's one of the website I tried to copy:

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

I am very eager to get this problem solved and any help would be greatly appreciated. Thanks!

-CJ

Answer 1

Someone who really knows their way around the OL API will be able to explain this properly, but basically, your code is fine, but you need to reorder it. You need to add a map layer, and zoom to an extent, before you can call addPopup. I think this is because addPopup doesn't need an explicit layer of its own; it uses the map layer; and therefore you need a map layer on your map before trying to use it. That makes sense, but I am not sure why you need also to have called a zoom/zoomToExtent function.

Here's a fiddle, I've tried to leave your code as unchanged as possible:

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

And here's the JS with some comments:

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