使用 OpenLayers 3 添加标记答案

【问题标题】：Adding marker using OpenLayers 3使用 OpenLayers 3 添加标记
【发布时间】：2016-07-15 15:24:43
【问题描述】：

我想在任何经度和纬度（位置）上添加一个简单的标记。我用谷歌搜索了很多，但没有从那里找到任何明智的答案或帮助。我尝试过一些代码，但它们对我来说效果不佳。我不擅长编程和阅读现有代码。

请到这里http://openlayers.org/en/latest/examples/icon.html 看看这是一个很好的例子，它显示了图标，但后面有一个图像而不是任何地图。我试图在那里显示任何地图并显示带有经度和纬度的标记，但从我的角度来看它不起作用。

我只想在任何特定位置显示带有标记的简单地图。点击弹出窗口应打开并应包含有关该位置的信息

例如这是一家xyz餐厅、xyz酒店、xyz寺庙等。

【问题讨论】：

标签： javascript popup openlayers openlayers-3 marker

【解决方案1】：

如果您想在单击标记时在弹出窗口中显示自定义内容：

 $(element).popover({
        'placement': 'top',
        'html': true,
        'content': "this is a "+feature.get('type')+" in location : "+feature.getGeometry().getCoordinates().toString()
      });

如果您共享的链接中的示例不适合您，您能否在控制台中显示它返回的错误

【讨论】：

【解决方案2】：

您链接的示例中的背景地图被设计为看起来像一张图片。它使用以下代码拉入：

  var rasterLayer = new ol.layer.Tile({
    source: new ol.source.TileJSON({
      url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.json',
      crossOrigin: ''
    })
  });

如果您想要不同的地图，您可以将切片图层源替换为 OpenLayers 中可用的任何源，或使用您的自定义源。也许 OpenStreetMap 会是一个选择？只需将上面的 sn-p 替换为以下内容：

  var rasterLayer = new ol.layer.Tile({
    source: new ol.source.OSM()
  });

在该示例中定位弹出窗口并设置其内容的代码是

      var coordinates = feature.getGeometry().getCoordinates();
      popup.setPosition(coordinates);
      $(element).popover({
        'placement': 'top',
        'html': true,
        'content': feature.get('name')
      });

要同时显示纬度和经度，请将代码更改为

      var coordinates = feature.getGeometry().getCoordinates();
      popup.setPosition(coordinates);
      $(element).popover({
        'placement': 'top',
        'html': true,
        'content': feature.get('name') + ' ' + ol.coordinate.toStringHDMS(coordinates, 1)
      });

【讨论】：