使用OpenLayers添加标记3

时间:2016-07-15 15:24:44

标签: javascript popup openlayers openlayers-3 marker

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

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

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

E.g。这是一家xyz餐厅,xyz酒店,xyz寺庙等。

2 个答案:

答案 0 :(得分:0)

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

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

如果您分享的链接中的示例不适合您,您可以在控制台中显示它返回的错误

答案 1 :(得分:0)

您链接的示例中的背景地图设计为看起来像图像。使用以下代码将其拉入:

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