php - 在 openlayers 3 中单击标记时显示弹出窗口

Question

下面是我的代码。这工作正常，但我想知道如何在标记上弹出 onClick？我想显示使用 php 从 mysql 数据库动态获取的标记中的内容，但现在我想知道如何为这里的每个标记提供不同的弹出窗口？

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

epsg4326 =  new OpenLayers.Projection("EPSG:4326"); //WGS 1984 projection
projectTo = map.getProjectionObject(); //The map projection (Spherical Mercator)

var lonLat = new OpenLayers.LonLat( 13.0161, 22.2845 ).transform(epsg4326, projectTo);

var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);
var cmark = [13.0161, 22.2845];
markers.addMarker(new OpenLayers.Marker(lonLat));      

var zoom=8;
map.setCenter (lonLat, zoom);

var vectorLayer = new OpenLayers.Layer.Vector("Overlay");

// Define an array. This could be done in a seperate js file.
// This tidy formatted section could even be generated by a server-side script (jsonp)
var markers = [
   [ 73.0161, 26.2845 ],
   [ -0.1244324, 51.5006728 ],
   [ -0.119623, 51.503308 ]
];

//Loop through the markers array
for (var i=0; i<markers.length; i++) {

   var lon = markers[i][0];
   var lat = markers[i][1];

    var feature = new OpenLayers.Feature.Vector(
            new OpenLayers.Geometry.Point( lon, lat ).transform(epsg4326, projectTo),
            {description: "marker number " + i} ,
            {externalGraphic: 'marker.png', graphicHeight: 25, graphicWidth: 21, graphicXOffset:-12, graphicYOffset:-25  }
        );             
    vectorLayer.addFeatures(feature);
}                        
map.addLayer(vectorLayer);
</script>

Answer 1

在 OpenLayers 2 中添加弹出窗口:

popup = new OpenLayers.Popup("yourPopupID",
               new OpenLayers.LonLat(lon,lat),//could be fetched from a DB
               new OpenLayers.Size(200,200),
               "yourDescription",//could be fetched from DB
               true);

map.addPopup(popup);

现在这对于您在问题中提供的代码示例来说已经足够了，您可以使用 AJAX 调用 php 脚本来从数据库检索数据，该脚本将完成这项工作