Javascript 在添加新标记之前删除添加的标记

我正在尝试使用openlayers开发具有标记位置功能的web应用程序。我想在单击地图时最多添加一个标记。当用户第二次单击地图时，上一个标记将被删除。但是，在添加新的标记之前，我找不到适当的方法删除标记

<script type="text/javascript">
    var myMap = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ],
        view: new ol.View({
            center: ol.proj.fromLonLat([118.0149, -2.5489]),
            zoom: 5
        })
    });

    var features = [];

    myMap.on('click', function(evt) {
        var coordinates = evt.coordinate;
        var lonlat = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
        var lon = lonlat[0];
        var lat = lonlat[1];

        var Markers = {lat: lat, lng: lon};
        addPin(Markers);
    });

    function addPin(Markers) {
        var item = Markers;
        var longitude = item.lng;
        var latitude = item.lat;

        var iconFeature = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.transform([longitude, latitude], 'EPSG:4326', 'EPSG:3857'))
        });

        var iconStyle = new ol.style.Style({
            image: new ol.style.Icon(({
                anchor: [0.5, 1],
                src: "http://cdn.mapmarker.io/api/v1/pin?text=P&size=50&hoffset=1"
            }))
        });

        iconFeature.setStyle(iconStyle);
        features.push(iconFeature);

        var vectorSource = new ol.source.Vector({
            features: features
        });

        var vectorLayer = new ol.layer.Vector({
            source: vectorSource
        });

        myMap.addLayer(vectorLayer);
    }

var myMap=新的ol.Map({
目标：“地图”，
图层：[
新ol.layer.Tile({
来源：new ol.source.OSM（）
})
],
视图：新ol.view({
中心：Lonlat的其他项目（[118.0149，-2.5489]），
缩放：5
})
});
var特征=[]；
myMap.on（'click'，函数（evt）{
var坐标=evt坐标；
var lonlat=ol.proj.transform（evt.coordinate，'EPSG:3857'，'EPSG:4326'）；
var-lon=lonlat[0]；
var-lat=lonlat[1]；
var标记={lat:lat，lng:lon}；
addPin（标记）；
});
函数addPin（标记）{
变量项=标记；
var经度=第1.lng项；
var纬度=item.lat；
变量iconFeature=新的ol.特征({
几何体：新的ol.geom.Point（ol.proj.transform（[经度，纬度]，'EPSG:4326'，'EPSG:3857'））
});
var iconStyle=新的ol.style.style({
图片：新ol.style.Icon(({
锚定：[0.5,1]，
src:“http://cdn.mapmarker.io/api/v1/pin?text=P&size=50&hoffset=1"
}))
});
iconFeature.setStyle（iconStyle）；
功能。推送（iconFeature）；
var vectorSource=新的ol.source.Vector({
特色：特色
});
var vectorLayer=新ol.layer.Vector({
来源：矢量源
});
myMap.addLayer（矢量层）；
}

---

你有几种方法可以做到这一点。 最合适的方法是使用：

vectorLayer.getSource().clear();

或：

但在您的情况下，每次添加标记时，您也会添加一个新图层，仅在添加图层之前从地图中删除图层就足够了：

var vectorLayer;
function addPin(Markers) {
        //here it is
        myMap.removeLayer(vectorLayer) 
        var item = Markers;
        var longitude = item.lng;
        var latitude = item.lat;
        .........................
        .........................
        //and here remove the keyword var , so init the one declared in global section
        vectorLayer = new ol.layer.Vector({
        source: vectorSource
        });

---

别忘了在全局部分而不是在addPin函数中声明向量层，否则会出现错误

您有几种方法可以做到这一点。 最合适的方法是使用：

vectorLayer.getSource().clear();

或：

但在您的情况下，每次添加标记时，您也会添加一个新图层，仅在添加图层之前从地图中删除图层就足够了：

var vectorLayer;
function addPin(Markers) {
        //here it is
        myMap.removeLayer(vectorLayer) 
        var item = Markers;
        var longitude = item.lng;
        var latitude = item.lat;
        .........................
        .........................
        //and here remove the keyword var , so init the one declared in global section
        vectorLayer = new ol.layer.Vector({
        source: vectorSource
        });

---

不要忘记在全局部分声明向量层，而不要在addPin函数中声明，否则会出现错误

如果您只想获取标记的当前位置，我建议您不要将以前的值保存在features数组中。下面是JS fiddle的基本解决方案

在

addPin

功能中更改此选项

   var vectorSource = new ol.source.Vector({
        features: [iconFeature]
    });

你可以在这里看到工作副本

---

如果您只想获取标记的当前位置，我建议您不要在features数组中保存以前的值。下面是JS fiddle的基本解决方案

在

addPin

功能中更改此选项

   var vectorSource = new ol.source.Vector({
        features: [iconFeature]
    });

你可以在这里看到工作副本

请尝试myMap.removeLayer（vectorLayer）或更新打印标记进行优化。请尝试myMap.removeLayer（vectorLayer）或更新打印标记进行优化。