我有一个使用mapbox javascript库成功将标记添加到地图的功能。但是,我希望函数在添加两个新标记之前清除地图中的所有标记,这样一次只显示两个标记。
我在这里看了其他问题/答案,但到目前为止还没有一个问题;标记只是在不被删除的情况下不断添加。
var map = L.mapbox.map(...);
function updateMarkers(d) {
var featureLayer = L.mapbox.featureLayer();
map.removeLayer(featureLayer);
getCoordX = d.stn_f_c;
getCoordX = getCoordX.split(",");
getCoordY = d.stn_t_c;
getCoordY = getCoordY.split(",");
featureLayer = L.marker([getCoordX[0],getCoordX[1]], {
icon: L.mapbox.marker.icon({
'marker-size': 'large',
'marker-symbol': 'bicycle',
'marker-color': '#66CD00'
})
}).addTo(map);
featureLayer += L.marker([getCoordY[0],getCoordY[1]], {
icon: L.mapbox.marker.icon({
'marker-size': 'large',
'marker-symbol': 'bicycle',
'marker-color': '#FF6666'
})
}).addTo(map);
}
提前感谢你的帮助。
答案 0 :(得分:2)
' removeLayer'方法只是从地图实例中删除图层并保持原样,以便稍后重新添加。您需要调用L.mapbox.FeatureLayer的clearLayers()
,这将从图层中删除所有添加的功能:
featureLayer.clearLayers();
此外,您还要覆盖使用featureLayer
实例保存图层实例的引用L.Marker
:
featureLayer = L.marker(...);
您在+=
引用上使用featureLayer
赋值运算符的下一个标记(现在它包含对第一个标记的引用),但它不会起作用。它用于添加值,而不是对象实例:
featureLayer += L.marker(...);
使用featureLayer的addLayer
方法或使用对象的addTo
方法,有两种方法可以将单个图层(标记,多边形等)添加到featureLayer中;重新尝试添加:
featureLayer.addLayer(marker);
// or
marker.addTo(featureLayer);
您正在做的另一个奇怪的事情是添加坐标。您将字符串值拆分为数组:
getCoordX = d.stn_f_c;
getCoordX = getCoordX.split(",");
现在(我假设)你有一个包含两个值的数组,然后你单独使用它们并再次创建一个数组:
L.marker([getCoordX[0],getCoordX[1]])
你可以跳过它,只是这样做:
L.marker(getCoordX)
实际上是一样的。我已经清理了你的代码,但我无法测试它,所以请原谅我,如果我犯了一个写意错误:
var map = L.mapbox.map(...);
// Create empty layer
var featureLayer = L.mapbox.featureLayer().addTo(map);
function updateMarkers (d) {
// Clear layer
featureLayer.clearLayers();
// Splitting the value and adding it in one go
L.marker(d.stn_f_c.split(","), {
icon: L.mapbox.marker.icon({
'marker-size': 'large',
'marker-symbol': 'bicycle',
'marker-color': '#66CD00'
})
}).addTo(featureLayer); // Add to the featureLayer
L.marker(d.stn_t_c.split(","), {
icon: L.mapbox.marker.icon({
'marker-size': 'large',
'marker-symbol': 'bicycle',
'marker-color': '#FF6666'
})
}).addTo(featureLayer);
}
希望有所帮助