Openlayers在使用Ajax检索后显示标记

<script src="https://openlayers.org/en/latest/build/ol.js"></script>

<div id="map" style="width: 100%; height: 400px;"></div>

var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([0, 0]),
    zoom: 2
  })
});

var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true);
xhr.onload = function () {
  if (xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    // 处理获取到的标记数据
    displayMarkers(data);
  }
};
xhr.send();

function displayMarkers(data) {
  var markers = new ol.layer.Vector({
    source: new ol.source.Vector({
      features: new ol.format.GeoJSON().readFeatures(data)
    }),
    style: new ol.style.Style({
      image: new ol.style.Icon({
        src: 'marker.png'
      })
    })
  });
  map.addLayer(markers);
}