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