Изменение маркеров на карте без повторной инициализации карты - PullRequest
Новая
       7

Изменение маркеров на карте без повторной инициализации карты

0 голосов
/ 04 ноября 2018

У меня есть карта 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, и когда я копирую pase из nano ... вы знаете ... проблем нет с этой строкой кода. Когда я запускаю этот код, я не получаю никаких ошибок. У меня есть все маркеры в первый раз, и когда vm.country меняет маркеры, но только плохая вещь - это то, что карта пуста. Буквенно белая ... только отображаются маркеры, и я не знаю почему.

Можете ли вы помочь мне, пожалуйста? Спасибо!

...