使用OpenLayers 3添加标记

Question

我想在任何经度和纬度（位置）上添加一个简单的标记。 我已经在Google上搜索了很多，但是没有从那里找到任何明智的答案或帮助。 我尝试了一些代码，但对我而言它们不能正常工作。 我不太擅长编程和阅读现有代码。

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

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

例如，这是一家xyz餐厅，xyz酒店，xyz神庙等。

Answer 1

如果要在单击标记时在弹出窗口中显示自定义内容，请执行以下操作：

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

如果您共享的链接中的示例不起作用，可以在控制台中显示它返回的错误

Answer 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？ 只需将以下代码段替换为以下代码：

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