具有自定义文本/标签的OpenLayers标记

Question

I have "N" markers on an Openlayers map and I need to "label" these markers (Meaning: Put a text in/on them) I have tried several ways but still couldn't achieve what I need.

My JS code snippet (Removed some irrevelant stuff from the code):

function getWeatherInfo(){
if(wheatherOfCitiesMarkerLayer == null){
    wheatherOfCitiesMarkerLayer = new OpenLayers.Layer.Markers("WeatherMarkerLayer");
    map.addLayer(wheatherOfCitiesMarkerLayer);
}

$.getJSON(qryPointResultListForAllCities(),  function(data) {   
    if(data!= null){
        var size = new OpenLayers.Size(60,45);
        var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);

        for(var i = 0; i < data.pr.length; i ++){   

            // Create markers by using the returned data from the server
            //...
            //... Removed some irrevelant stuff

            var lat = data.pr[i].la;
            var lon = data.pr[i].lo;
            var infos = data.pr[i].info.infos;
            var infop = data.pr[i].info.infop;
            var infocc = data.pr[i].info.infocc;

            var icon = new OpenLayers.Icon('my_marker_img.png',size,offset);

            location = new OpenLayers.LonLat(lon, lat);
            location = transformFromWGS1984ToSphericalMercator(location.clone());
            marker = new OpenLayers.Marker(location,icon.clone());

            wheatherOfCitiesMarkerLayer.addMarker(marker);

        }

    }

}

}

What I need to do is put a label or text in/on each marker on the map.

Answer 1

Since you are taking marker data from server anyway, what you can do is, create a layer in a map file with just the label class defined and add it on your marker layer as a overlay.

Hope this helps.

Answer 2

Instead of adding text (or label) to a marker, you can add a marker to a label.

This is done by creating a new text file with the location , title , description and path to your icon (not required, it will use the default if none is set). For example, if you want to place two markers on the map, the text file may look like this

point  title              description            icon
10,99  An labeled marker  with default image     
12,34  Another marker     This is my label text  http://example.com/marker.png

Please note that there should be tabs between the names and parameters, not spaces. There is also a tab at the end of the second line where no icon is given.

Save this file somewhere on your site and put this code where your layers are being initialized.

var textl = new OpenLayers.Layer.Text("text", {location : "data_dile.txt"});
map.addLayer(textl);

The text file may be created dynamically though server-side languages, such as PHP.

There is an online example here .