OpenLayers-进入新搜索时从搜索结果中清除标记

Question

我已经从OpenLayers，Openstreetmap和BingMaps创建了具有不同图层的地图。我使用了https://github.com/jonataswalker/ol-geocoder中的OpenLayers Control Geocoder（CSS和Javascript文件）。

现在，我想添加该功能，如果输入了新的搜索，则旧标记应自动消失，并显示新的搜索结果。目前，所有标记都将保留在地图上。我已经在这里对stackoverflow尝试了不同的解决方案，但是到目前为止，它们都没有起作用。谢谢。

这是我main.js中的代码。

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import VectorLayer from 'ol/layer/Vector';
import Vector from 'ol/source/Vector';
import GeoJSON from 'ol/format/GeoJSON';
import Style from 'ol/style/Style';
import Text from 'ol/style/Text';
import Stroke from 'ol/style/Stroke';
import * as olProj from 'ol/proj';
import OSM from 'ol/source/OSM';
import Circle from 'ol/style/Circle';
import Fill from 'ol/style/Fill';
import Stamen from 'ol/source/Stamen';
import BingMaps from 'ol/source/BingMaps';
import LayerSwitcher from 'ol/source/ol-layerswitcher';
import Geocoder from 'ol/source/ol-geocoder';

const map = new Map({
  target: 'map',
  view: new View({
    center: olProj.fromLonLat([16.372, 48.209]),
    zoom: 14
  })
});

//Watercolor
map.addLayer(new TileLayer({
    title: 'watercolor',
    type: 'base',
    source: new Stamen({
        layer: 'watercolor',
        visible: false
    })
}));

//BingMaps
map.addLayer(new TileLayer({
    title: 'Bing',
    type: 'base',
    source: new BingMaps({
    key: 'Auj_QkN4cbeT0AIn4Dq-lLk1zsqobx3tpwmekXJgjSFFp0AN48MsogkxCjGZkns9',
    imagerySet: 'Aerial',
    visible: false
    })
}));    

//OpenStreetMap
map.addLayer(new TileLayer({
    title: 'OSM',
    type: 'base',
    source: new OSM()
}));    

const searchResultSource = new Vector();
const searchResultLayer = new VectorLayer({
  source: searchResultSource
});

searchResultLayer.setStyle(new Style({
  image: new Circle({
    fill: new Fill({
      color: 'rgba(255,255,255,0.4)'
    }),
    stroke: new Stroke({
      color: '#3399CC',
      width: 1.25
    }),
    radius: 15
  })
}));
map.addLayer(searchResultLayer);
map.addControl(new LayerSwitcher());

//Coordinate Search

var geocoder = new Geocoder('nominatim', {
  provider: 'mapquest',
  key: 'ACfOgoF7JNAG57XQv72HzpCEoSo8hQmZ',
  lang: 'de-AT', //en-US, fr-FR
  placeholder: 'Search for...',
  targetType: 'glass-button',
  limit: 5,
  keepOpen: true
});
map.addControl(geocoder);

geocoder.on('addresschosen', function(evt){
  var feature = evt.feature,
      coord = evt.coordinate,
      address = evt.address;
  // some popup solution
  content.innerHTML = '<p>'+ address.formatted +'</p>';
  overlay.setPosition(coord);
});

geocoder.on('addresschosen', function(evt) {
  // it's up to you
  console.info(evt);
});

if (layersOnMap) {

function onDrawStart(event)
{
    var features = tempVectorSource.getFeatures();
    for(var i=0;i<features.length;i++)
    {
        features[i].setGeometry(new ol.geom.Point([]));
    }
    tempVectorSource.clear();
}

Answer 1