javascript OpenLayers 添加标记和弹出窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17259555/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
OpenLayers add Marker and Popup
提问by
I'm having trouble with OpenLayers. My working code is:
我在使用 OpenLayers 时遇到了问题。我的工作代码是：
<html><body>
<div id="mapdiv"></div>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script>
map = new OpenLayers.Map("mapdiv");
map.addLayer(new OpenLayers.Layer.OSM());
//var results = new OpenLayers.Layer.Text("My Points", { location:"./checkIns_0_view.txt", projection: map.displayProjection});
//map.addLayer(results);
var query = new OpenLayers.LonLat(-122.2928337167, 37.5549570333).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
var markers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(markers);
var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('http://openlayers.org/dev/img/marker-blue.png', size, offset);
marker = new OpenLayers.Marker(query, icon);
markers.addMarker(marker);
var zoom=16;
map.setCenter (query, zoom);
</script>
</body></html>
Now I want to add a Popup with some informations. I tried using several examples, like http://openlayers.org/dev/examples/osm-marker-popup.html. I want to add something like this:
现在我想添加一个包含一些信息的弹出窗口。我尝试使用几个示例，例如http://openlayers.org/dev/examples/osm-marker-popup.html。我想添加这样的东西：
var popup = new OpenLayers.Popup.FramedCloud("Popup", query, null, "Text", true);
map.addPopup(popup);
The first line can be compiled, but when I add the second line, the browser doesn't show my map. I think it might have to do with the query-lonLat, but I doesn't have the necessary OpenLayers-skills to find out.
第一行可以编译，但是当我添加第二行时，浏览器不显示我的地图。我认为这可能与 query-lonLat 有关，但我没有必要的 OpenLayers-skills 来找出答案。
I would appreciate an answer very much.
我非常感谢您的回答。
Greetings
问候
回答by martin jrk
According OpenLayers documentation, you are missing in a popup constructor the anchor parameterbetween "Text"and true. Probably this is the source of your problem. This parameter has nullvalue in the example for a popup:
var popup = new OpenLayers.Popup.FramedCloud("Popup", myLocation.getBounds().getCenterLonLat(), null, 'We ' + 'could be here. Or elsewhere.', null, true // true if we want a close (X) button, false otherwise );In Your case you can to use variable iconinstead of null value.
- In function map.addPopup(popup) you should have second parameter exclusiveas well. See OpenLayers documentation dev.openlayers.org/docs/files/OpenLayers/Map-js.html#OpenLayers.Map.addPopup or a definition of this method here. I think it is a good practice to use all defined parameters, because it often creates problems.
根据OpenLayers 文档，您在弹出构造函数中缺少"Text"和true之间的锚参数。这可能是您问题的根源。在弹出窗口的示例中，此参数具有空值：
var popup = new OpenLayers.Popup.FramedCloud("Popup", myLocation.getBounds().getCenterLonLat(), null, 'We ' + 'could be here. Or elsewhere.', null, true // true if we want a close (X) button, false otherwise );在您的情况下，您可以使用变量图标而不是空值。
- 在函数 map.addPopup(popup) 中，你也应该有第二个参数exclusive。请参阅 OpenLayers 文档 dev.openlayers.org/docs/files/OpenLayers/Map-js.html#OpenLayers.Map.addPopup 或此处此方法的定义。我认为使用所有定义的参数是一个很好的做法，因为它经常会产生问题。
Hopefully it will work, after adding all parameters. Your code for a working popup:
希望在添加所有参数后它会起作用。您的工作弹出窗口代码：
var popup = new OpenLayers.Popup.FramedCloud("Popup", query, null, "Text", null, true);
map.addPopup(popup, false);