在openlayer 3中搜索标记

<link rel="stylesheet" href="https://openlayers.org/en/v3.20.1/css/ol.css" type="text/css">
<script src="https://openlayers.org/en/v3.20.1/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
  })
});

<input type="text" id="search-input" placeholder="Search marker">

var searchInput = document.getElementById('search-input');

searchInput.addEventListener('input', function() {
  var searchText = this.value.toLowerCase();

  // 清除之前的搜索结果
  map.getOverlays().clear();

  // 遍历地图上的标记进行搜索
  map.getLayers().forEach(function(layer) {
    layer.getSource().forEachFeature(function(feature) {
      var markerText = feature.get('markerText').toLowerCase();

      if (markerText.indexOf(searchText) !== -1) {
        // 创建搜索结果标记
        var markerOverlay = new ol.Overlay({
          position: feature.getGeometry().getCoordinates(),
          element: document.createElement('div'),
          positioning: 'center-center'
        });

        // 设置标记的样式和内容
        markerOverlay.getElement().innerHTML = feature.get('markerText');
        markerOverlay.getElement().className = 'marker-overlay';

        // 将标记添加到地图上
        map.addOverlay(markerOverlay);
      }
    });
  });
});