OpenStreetMap和OpenLayer：简单的标记标签

Question

I'm trying to use an OpenStreetMap with OpenLayers.js, because I have to integrate in a web page a map with markers and labels of them. I've searched everywhere, but I didn't find anything... I've this script:

// Definisco la variabilie mappa come un oggetto OpenLayers.Map utilizzando il DivMappa, poi aggiungo il Layer OSM (Open Street Map)
var Mappa = new OpenLayers.Map("DivMappa");
Mappa.addLayer(new OpenLayers.Layer.OSM());

// Creo l'oggetto contenente le coordinate (prima longitudine e poi latitudine)
var LonLat = new OpenLayers.LonLat( 12.492347,  41.890183 );
var LonLat2 = new OpenLayers.LonLat( 12.492347,  12.492347 );

// Imposto lo zoom
var zoom=16;

// Creo una variabile contenete il layer dei marker poi collego il layer dei markers alla mappa
var LayerMarkers = new OpenLayers.Layer.Markers( "Markers" );
Mappa.addLayer(LayerMarkers);

// Aggiungo al layer dei marker un marker (utilizzando l'oggetto lonLat per le coordinate)
LayerMarkers.addMarker(new OpenLayers.Marker(LonLat));
LayerMarkers.addMarker(new OpenLayers.Marker(LonLat2));

// Imposto le coordinate di lonLat come centro della mappa di partenza
Mappa.setCenter (LonLat, zoom);

With this I am only capable of creating the markers, but I need to show on the top of them a text of what position are displaying. Is possible to add simple labels/title directly on markers? Like happens on GoogleMaps? Thanks in advance!

Answer 1

Makers are just images. They don't support text or labels.

I'd suggest you to use a popup instead, like this http://dev.openlayers.org/examples/osm-marker-popup.html

Otherwise, you should use a Layer.Vector with a StyleMap, like this http://dev.openlayers.org/examples/vector-features-with-text.html

Answer 2

You can use ol.overlays to create markers with svg and then place them on your openlayers map like so:

<svg id="popup" width="100" height="100">
  <circle cx="50" cy="50" r="40"
  stroke="green" stroke-width="4" fill="yellow" />
  Sorry, your browser does not support inline SVG.
</svg>


<script type="text/javascript">
var popup = new ol.Overlay({
  element: document.getElementById('popup')
});
popup.setPosition(ol.proj.fromLonLat([133.7751, -23.2744]));

      map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        target: 'mainMap',
        controls: ol.control.defaults({
          attributionOptions: {
            collapsible: false
          }
        }),
        view: new ol.View({
        center: ol.proj.fromLonLat([133.7751, -23.2744]),
        zoom: 4
        })

      });
      map.addOverlay(popup);
  </script>