Question

我试图将OpenStreetMap与OpenLayers.js一起使用，因为我必须在网页中集成带有标记和标签的地图。我到处搜索，但我找不到任何东西......我已经写过这个剧本了：

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

有了这个，我只能创建标记，但我需要在它们的顶部显示一个显示位置的文本。可以直接在标记上添加简单的标签/标题吗？就像发生在GoogleMaps上一样？提前谢谢！

Answer 1

制造商只是图像。它们不支持文本或标签。

我建议您使用弹出窗口，例如http://dev.openlayers.org/examples/osm-marker-popup.html

否则，您应该使用带有StyleMap的Layer.Vector，例如http://dev.openlayers.org/examples/vector-features-with-text.html

Answer 2

您可以使用ol.overlays使用svg创建标记，然后将它们放在openlayers地图上，如下所示：

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

OpenStreetMap和OpenLayer：简单的标记标签

2 个答案: