OpenStreetMap 和 OpenLayer：简单的标记标签答案

【问题标题】：OpenStreetMap and OpenLayer: simple marker labelsOpenStreetMap 和 OpenLayer：简单的标记标签
【发布时间】：2018-02-06 15:00:53
【问题描述】：

我正在尝试将 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 上发生的那样？提前致谢！

【问题讨论】：

欢迎来到 Stack Overflow！如果您还没有，请随时查看how to ask 和what's on-topic here。

标签： javascript html openlayers openstreetmap

【解决方案1】：

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

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

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

【讨论】：

好吧，我以为可以插入简单的标签……事实上我什么也没找到，这就是原因。谢谢！
建议假设 openlayers 2，而问题似乎假设 openlayers 5

【解决方案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>

【讨论】：