Question

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

请到这里http://openlayers.org/en/latest/examples/icon.html，看看这是一个很好的例子并显示图标，但背后有图像而不是任何地图。我试图在那里显示任何地图并显示经度和纬度的标记，但它不能在我的结束。

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

E.g。这是一家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)
      });

使用OpenLayers添加标记3

2 个答案: