os 地图上未显示 Openlayers3 标记

Question

之前我曾帮助建立一个项目，我需要在纽约市标记随机建筑物并显示有关建筑物的一些信息，长话短说，我已经使用 openlayers3 显示了一个 openstreetmap，视图已修复阿斯托里亚（纽约皇后区）。现在弹出窗口可以正常工作，但不显示标记。

我尝试从这个

中尝试改变几何形状

geometry: new ol.geom.Point(ol.proj.fromLonLat([-73.927870, 40.763633]))

到这个ol.geom.Point(ol.proj.transform([-73.920935,40.780229], 'EPSG:4326', 'EPSG:3857')),

并使用 transform 代替 fromLonLat，但没有显示它们，接下来是 styleIcon 中的 src，我已经下载了标准的 openlayers3 标记和尝试从 src: 'img/icon.png' 之类的图像文件夹中添加它，但没有成功。

谁能帮我理解这是怎么回事，为什么地雷标记在地图上显示不正确？

这是该项目的 JSFiddle，您会看到弹出窗口正常工作但没有标记。

此 JSFiddle 已更新，现在可以正常使用，标记显示正确。

/* Create the map */

// Elements that make up the popup
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');

// Add a click handler to hide the popup.
// @return {boolean}.
closer.onclick = function() {
  overlay.setPosition(undefined);
  closer.blur();
  return false;
};

// Create an overlay to anchor the popup
// to the map
var overlay = new ol.Overlay({
  element: container,
  autoPan: true,
  autoPanAnimation: {
    duration: 250
  }
});

// setting up coordinates for map to display
var city = ol.proj.transform([-73.920935,40.780229], 'EPSG:4326', 'EPSG:3857'); 

// setting up openlayer3 view
var view = new ol.View({
    center: city,
    zoom: 15
});

// Create the map
var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM({
        crossOrigin: 'anonymous'
      })
    })
  ],
  overlays: [overlay],
  target: 'map',
  view: view
});

// Setup markers
var markers = new ol.layer.Vector({
  source: new ol.source.Vector({
    features: [
      new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([-73.927870, 40.763633])),
        name: 'Crescent St',
        description: 'Apartment'
      }),
      new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([-73.917356, 40.763958])),
        name: 'Long Island City',
        desctiption: 'Apartment'
      })
    ]
  }),
  style: new ol.style.Style({
    image: new ol.style.Icon({
      anchor: [0.5, 46],
      anchorXUnits: 'fraction',
      anchorYUnits: 'pixel',
      opacity: 0.75,
      src: 'https://openlayers.org/en/v3.12.1/examples/data/icon.png',
    })
  })
});
map.addLayer(markers);

// Setting up click handler for the map
// to render the popup
map.on('singleclick', function(evt) {
  var name = map.forEachFeatureAtPixel(evt.pixel, function(feature) {
    return feature.get('name');
  })
  var coordinate = evt.coordinate;
  content.innerHTML = name;
  overlay.setPosition(coordinate);
});
map.on('pointermove', function(evt) {
  map.getTargetElement().style.cursor = map.hasFeatureAtPixel(evt.pixel) ? 'pointer' : '';
});

Answer 1

只需从您的 src 样式中删除 https。

而不是src: 'https://openlayers.org/en/v3.12.1/examples/data/icon.png', 放src: 'http://openlayers.org/en/v3.12.1/examples/data/icon.png',

您还需要缩小一点才能看到您的标记

os 地图上未显示 Openlayers3 标记

Openlayers3 markers are not showing up on os map

javascript

jquery

openstreetmap

openlayers-3