更改地图框上的标记而无需重新初始化地图

Question

我有一个带有一些标记的mapbox地图，并且我希望根据一些onclick事件来删除它们并添加其他标记，而无需再次生成该地图。

顺便说一下，地图的div只是一个简单的div：

 <div id="map" class="map" style='width: 100%; height: 900px;display:block;'><div>

我的方法：

 var mapPopupsJS = L.mapbox.map('map', 'mapbox.streets', {minZoom: 3})
 .setView([ 44.4267674,26.1025384 ], 5 );
 function setMarkers(){
 switch(vm.country){
 case 0:
 mapPopupsJS.eachLayer(function (layer) {
 mapPopupsJS.removeLayer(layer);
 });
 var myLayer =      L.mapbox.featureLayer().loadURL('/getGeoJson').addTo(mapPopupsJS);
 myLayer.on('layeradd', function(e) {
   var marker = e.layer,
     feature = marker.feature;
   var content = '<p><strong>' + feature.properties.title + '</strong><br></p><img src="' + feature.properties.image + '" alt="IMAGE UNAVAILABLE" onerror="onImgError(th$
   marker.bindPopup(content);
 });
 mapPopupsJS.scrollWheelZoom.enable();
 break;
 case 179:
 mapPopupsJS.eachLayer(function (layer) {
 mapPopupsJS.removeLayer(layer);
 });
 var myLayer =      L.mapbox.featureLayer().loadURL('/getGeoJsonRO').addTo(mapPopupsJS);
 myLayer.on('layeradd', function(e) {
 var marker = e.layer,
   feature = marker.feature;
  var content = '<p><strong>' + feature.properties.title + '</strong><br></p><img src="' + feature.properties.image + '" alt="IMAGE UNAVAILABLE" onerror="onImgError(th
 });
 mapPopupsJS.scrollWheelZoom.enable();
 break;
 case 93:
 mapPopupsJS.eachLayer(function (layer) {
 mapPopupsJS.removeLayer(layer);
 });
 var myLayer =      L.mapbox.featureLayer().loadURL('/getGeoJsonCR').addTo(mapPopupsJS);
   myLayer.on('layeradd', function(e) {
   var marker = e.layer,
     feature = marker.feature;
   var content = '<p><strong>' + feature.properties.title + '</strong><br></p><img src="' + feature.properties.image + '" alt="IMAGE UNAVAILABLE" onerror="onImgError(th$
   marker.bindPopup(content);
 });
 mapPopupsJS.scrollWheelZoom.enable();
 break;
 case 95:
 mapPopupsJS.eachLayer(function (layer) {
 mapPopupsJS.removeLayer(layer);
 });
 var myLayer =      L.mapbox.featureLayer().loadURL('/getGeoJsonHU').addTo(mapPopupsJS);
 myLayer.on('layeradd', function(e) {
 var marker = e.layer,
 feature = marker.feature;
 var content = '<p><strong>' + feature.properties.title + '</strong><br></p><img src="' + feature.properties.image + '" alt="IMAGE UNAVAILABLE" onerror="onImgError(th$
   marker.bindPopup(content);
 });
 mapPopupsJS.scrollWheelZoom.enable();
 break;
 case 17:
 mapPopupsJS.eachLayer(function (layer) {
     mapPopupsJS.removeLayer(layer);
 });
 var myLayer =      L.mapbox.featureLayer().loadURL('/getGeoJsonBS').addTo(mapPopupsJS);
 myLayer.on('layeradd', function(e) {
   var marker = e.layer,
     feature = marker.feature;
   var content = '<p><strong>' + feature.properties.title + '</strong><br></p><img src="' + feature.properties.image + '" alt="IMAGE UNAVAILABLE" onerror="onImgError(th$
   marker.bindPopup(content);
 });
 mapPopupsJS.scrollWheelZoom.enable();
 break;
 case 189:
 mapPopupsJS.eachLayer(function (layer) {
 mapPopupsJS.removeLayer(layer);
 });
 var myLayer =      L.mapbox.featureLayer().loadURL('/getGeoJsonSL').addTo(mapPopupsJS);
 myLayer.on('layeradd', function(e) {
   var marker = e.layer,
     feature = marker.feature;
   var content = '<p><strong>' + feature.properties.title + '</strong><br></p><img src="' + feature.properties.image + '" alt="IMAGE UNAVAILABLE" onerror="onImgError(th$
   marker.bindPopup(content);
 });
 mapPopupsJS.scrollWheelZoom.enable();
 break;
 case 22:
 mapPopupsJS.eachLayer(function (layer) {
 mapPopupsJS.removeLayer(layer);
 });
 var myLayer =      L.mapbox.featureLayer().loadURL('/getGeoJsonBG').addTo(mapPopupsJS);
 myLayer.on('layeradd', function(e) {
 var marker = e.layer,
 feature = marker.feature;
   var content = '<p><strong>' + feature.properties.title + '</strong><br></p><img src="' + feature.properties.image + '" alt="IMAGE UNAVAILABLE" onerror="onImgError(th$
   marker.bindPopup(content);
 });
 mapPopupsJS.scrollWheelZoom.enable();
 break;
 case 13:
 mapPopupsJS.eachLayer(function (layer) {
 mapPopupsJS.removeLayer(layer);
 });
 var myLayer =      L.mapbox.featureLayer().loadURL('/getGeoJsonDE').addTo(mapPopupsJS);
 myLayer.on('layeradd', function(e) {
var marker = e.layer,
feature = marker.feature;
   var content = '<p><strong>' + feature.properties.title + '</strong><br></p><img src="' + feature.properties.image + '" alt="IMAGE UNAVAILABLE" onerror="onImgError(th$
   marker.bindPopup(content);
 });
 mapPopupsJS.scrollWheelZoom.enable();
 break;
 case 53:
 mapPopupsJS.eachLayer(function (layer) {
 mapPopupsJS.removeLayer(layer);
 });
 var myLayer = L.mapbox.featureLayer().loadURL('/getGeoJsonCS').addTo(mapPopupsJS);
 myLayer.on('layeradd', function(e) {
   var marker = e.layer,
     feature = marker.feature;
   var content = '<p><strong>' + feature.properties.title + '</strong><br></p><img src="' + feature.properties.image + '" alt="IMAGE UNAVAILABLE" onerror="onImgError(th$
   marker.bindPopup(content);
 });
 mapPopupsJS.scrollWheelZoom.enable();
 break;
 case 191:
 mapPopupsJS.eachLayer(function (layer) {
 mapPopupsJS.removeLayer(layer);
 });
 var myLayer = L.mapbox.featureLayer().loadURL('/getGeoJsonSK').addTo(mapPopupsJS);
 myLayer.on('layeradd', function(e) {
 var marker = e.layer,
 feature = marker.feature;
   var content = '<p><strong>' + feature.properties.title + '</strong><br></p><img src="' + feature.properties.image + '" alt="IMAGE UNAVAILABLE" onerror="onImgError(th$
   marker.bindPopup(content);
 });
 mapPopupsJS.scrollWheelZoom.enable();
 break;
 }}
 setMarkers();

一开始vm.country为0，所以我继续第一种情况。忽略那些$符号，我正在Linux上工作，当我从nano复制pase时...您知道...没有问题这行代码。 当我运行这段代码时，我没有任何错误。我第一次拥有所有标记，而当vm.country更改标记更改时，唯一的不好的是地图是空白的。显示标记，我不知道为什么。

能帮我吗？ 谢谢！