在创建带有通过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);
}
});
}