通过ajax更新的位置不会显示在标记上

时间:2018-10-31 14:28:19

标签: javascript leaflet

在创建带有通过ajax检索到的最新位置的新标记时遇到问题。我尝试使用断点调试代码,并且确实更新了数据,但是标记仍然与上一个相同。我怀疑不会创建标记,并且地图使用旧的标记来显示标记。

var markers = [];
function pushMarker(marker) {
  markers.push(marker);
}

function createMarker(data) {
  var marker = new L.marker([data[0], data[1]]);
  pushMarker(marker);
  showMarker(marker);
}

//General Functions
function hideMarker(marker) {
  map.removeLayer(marker);
}

function showMarker(marker) {
  map.addLayer(marker);
}


//Test Function
//Group 2
var createdT = false;
var shownT = false;
var markersT = [];

var t1;
var t2;

function pushMarkerT(marker) {
  markersT.push(marker);
}



function createMarkerT(data) {
  $.ajax({
    type: "GET",
    url: '',
    success: function (data, status, xhr) {
      for (var i = 0; i < data.Table.length; i++) {
        var customPopup = 'Coordinates X: ' + data.Table[i].Latitude + '</br>Coordinates Z: ' + data.Table[i].Longitude + '</br>Station: ' + data.Table[i].Station + ' </br> Box: ' + data.Table[i].Box + '</br > Timestamp: ' + data.Table[i].LocationSend;
          var customOptions = {
            'maxWidth': '500',
            'className': 'custom'
          };
          var marker = L.marker(new L.LatLng(data.Table[i].Latitude, data.Table[i].Longitude, data.Table[i].Station));
          marker.bindPopup(customPopup, customOptions);
          pushMarkerT(marker);
          showMarker(marker);
        }
      },
      error: function (xhr) {
      alert(xhr.responseText);
    }
  });
}

function groupTest() {
  $.ajax({
    type: "GET",
    url: '',
    success: function (data, status, xhr) {
      for (var i = 0; i < data.Table.length; i++) {
        if (createdA === false) {
          for (var t = 0; t <= 20; t++) {
            t1 = data.Table[i].Latitude;
            t2 = data.Table[i].Longitude;
            createMarkerT([t1, t2, t3, t4]);
            shownT = true;
            createdT = true;
          }
        } else if (shownA === false) {
          for (var t3 = 0; t3 < 20; t3++) {
            showMarker(markersT[t3]);
            shownT = true;
          }
        }else if (shownT === true) {
          for (var t4 = 0; t4 < 20; t4++) {
            hideMarker(markersT[t4]);
            shownT = false;
          }
        }
      }
    },
    error: function (xhr) {
      alert(xhr.responseText);
    }
  });
}


//Group 1
var createdA = false;
var shownA = false;

var a1 = ;
var a2 = ;

var markersA = L.markerClusterGroup();

var redIcon = new L.Icon({
  iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color- 
  markers/master/img/marker-icon-red.png',
  shadowUrl: 
     'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker- 
  shadow.png',
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  shadowSize: [41, 41]
});

function createMarkerA(data) {
  var customPopup = 'Coordinates X: ' + data[0] + '</br>Coordinates Z: ' + 
  data[1] + '</br>Station: Central CC </br>Box: 2 </br>Timestamp: 12:08:42';
  var customOptions = {
    'maxWidth': '500',
    'className': 'custom'
  }
  var marker = L.marker(new L.LatLng(data[0], data[1]), { icon: redIcon });
  marker.bindPopup(customPopup, customOptions);
  markersA.addLayer(marker);
  map.addLayer(markersA);

  var myTimer = setInterval(function () {
    groupOne();
  }, 2000);
}

function groupOne() {
  $.ajax({
    type: "GET",
    url: '',
    success: function (data, status, xhr) {
      for(var i = 0; i < data.Table.length; i++) {
        if (createdA === false) {
          a1 = data.Table[i].Latitude;
          a2 = data.Table[i].Longitude;
          createMarkerA([a1, a2]);
          createdA = true;
          shownA = true;
        }else if (shownA === false) {
          map.addLayer(markersA);
          shownA = true;
        }else if (shownA === true) {
          map.removeLayer(markersA);
          createdA = false;
          shownA = false;
        }
      }
    },
    error: function (xhr) {
      alert(xhr.responseText);
    }
  });
}

0 个答案:

没有答案