Как обновить маркеры в режиме реального времени с помощью ajax
1
Могу ли я узнать, как обновить местоположение в режиме реального времени, если значение местоположения было изменено. Текущий код - это то, что я использовал для извлечения данных из базы данных. Я пробовал много решений, таких как заданный интервал или тайм-аут, но это не помогло мне в решении проблемы.
$.ajax({
type: "GET",
url: ')',
success: function (data, status, xhr) {
for (var i = 0; i < data.Table.length; i++) {
if (createdA === false) {
for (var a = 0; a <= 200; a++) {
a1 = data.Table[i].Latitude;
a2 = data.Table[i].Longitude;
a5 = data.Table[i].DeviceImei;
}
createMarkerA([a1, a2]);
shownA = true;
createdA = true;
setInterval(groupOne(), 10000);
}
else if (shownA === false) {
for (var a3 = 0; a3 < 200; a3++) {
showMarker(markersA[a3]);
shownA = true;
}
}
else if (shownA === true) {
for (var a4 = 0; a4 < 200; a4++) {
hideMarker(markersA[a4]);
shownA = false;
}
}
}
},
error: function (xhr) {
alert(xhr.responseText);
}
});
//Это код для инициализации карты
//centers the map at using the 2 points as reference
var center = L.bounds([, ], [, ]).getCenter();
//it sets the map to the pre-defined div container
var map = L.map('test_map').setView([center.x, center.y], 12);
var basemap = L.tileLayer('https://maps-{s}.onemap.sg/v3/Original/{z}/{x}/{y}.png', {
detectRetina: true,
maxZoom: 20,
minZoom: 11
});
basemap.addTo(map);
var markersLayer = new L.LayerGroup(); //layer contain searched elements
map.addLayer(markersLayer);
var controlSearch = new L.Control.Search({
position: 'topright',
layer: markersLayer,
initial: false,
zoom: 18,
marker: false
})
map.addControl(controlSearch);
L.circle([, ], 50, { color: '#DA2E2E', opacity: 2, fillColor: 'blue', fillOpacity: .3 }).bindPopup('').addTo(map);
L.circle([, ], 50, { color: '#DA2E2E', opacity: 2, fillColor: 'blue', fillOpacity: .3 }).bindPopup('').addTo(map);
//Код для инициализации маркеров
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);
}
var createdA = false;
var shownA = false;
var markersA = [];
var a1;
var a2;
var a5;
function createMarkerA(data) {
$.ajax({
type: "GET",
url: '',
success: function (data, status, xhr) {
for (var i = 0; i < 4; 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);
pushMarker(marker);
showMarker(marker);
}
},
error: function (xhr) {
alert(xhr.responseText);
}
});
}
function groupOne() {
$.ajax({
type: "GET",
url: '',
success: function (data, status, xhr) {
for (var i = 0; i < 4; i++) {
if (createdA === false) {
for (var a = 0; a < 200; a++) {
a1 = data.Table[i].Latitude;
a2 = data.Table[i].Longitude;
}
createMarkerA([a1, a2]);
shownA = true;
createdA = true;
}
else if (shownA === false) {
for (var a3 = 0; a3 <= 4; a3++) {
showMarker(markersA[a3]);
shownA = true;
}
}
else if (shownA === true) {
for (var a4 = 0; a4 <= 4; a4++) {
hideMarker(markersA[a4]);
shownA = false;
}
}
}
},
error: function (xhr) {
alert(xhr.responseText);
}
});
-
0SetInteval не принимает внутри вызова ajax.LDS
-
0Этот ajax-вызов отличается от функции, и функция вызывается внутри временного интервала.LDS
Показать ещё 7 комментариев
3 ответа
0
<html>
<head>
<title>Leaflet geolocate example</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<link rel="stylesheet" href="styles.css">
<script language="javascript">
var markers = [];
var createdA = false;
var shownA = false;
var markersA = [];
var markersA = [];
var a1;
var a2;
var a5;
var data1 = [];
var center = L.bounds([1.56073, 104.11475], [1.16, 103.502]).getCenter();
function init() {
map = new L.Map('test_map').setView(new L.LatLng(center.x, center.y), 12);;
var basemap = L.tileLayer('https://maps-
{s}.onemap.sg/v3/Original/{z}/{x}/{y}.png', {
attribution: '<img src="https://docs.onemap.sg/maps/images/oneMap64-
01.png" style="height:20px;width:20px;"/> New OneMap | Map data contributors,
<a href="http://SLA.gov.sg">Singapore Land Authority</a>',
detectRetina: true,
maxZoom: 20,
minZoom: 9
});
basemap.addTo(map);
$.ajax({
type: "GET",
url: '',
success: function (data, status, xhr) {
for (var i = 0; i < data.Table.length; i++) {
for (var s = 1; s < data.Table.length; s++) {
var d1 = { Table: { Latitude: data.Table[i].Latitude,
Longitude: data.Table[i].Longitude, Station: 'This is Littleton, CO.', Box:
'Box', LocationSend: 'testing1' } };
var d2 = { Table: { Latitude: data.Table[s].Latitude,
Longitude: data.Table[s].Longitude, Station: 'This is Denver, CO.', Box: 'Box',
LocationSend: 'testing2' } };
data1.push(d1);
data1.push(d2);
markersA.push(L.marker(new L.LatLng(data.Table[i].Latitude,
data.Table[i].Longitude)));
markersA.push(L.marker(new L.LatLng(data.Table[s].Latitude,
data.Table[s].Longitude)));
map.addLayer(markersA[0]);
map.addLayer(markersA[1]);
}
}
},
error: function (xhr) {
alert(xhr.responseText);
}
});
var myTimer = setInterval(function () {
groupOne(data1);
}, 2000);
}
function pushMarker(marker) {
markers.push(marker);
}
function createMarker(data1) {
var marker = new L.marker([data1[0], data1[1]]);
pushMarker(marker);
}
function showMarker(marker) {
map.addLayer(marker);
}
function hideMarker(marker, i) {
var locate = marker.getLatLng();
markersA[i].setLatLng(locate);
}
function createMarkerA(data1) {
var valid = true;
for (var i = 0; i < data1.length; i++) {
var customPopup = 'Coordinates X: ' + data1[i].Table.Latitude +
'</br>Coordinates Z: ' + data1[i].Table.Longitude + '</br>Station: ' +
data1[i].Table.Station + ' </br> Box: ' + data1[i].Table.Box + '</br >
Timestamp: ' + data1[i].Table.LocationSend;
//var customOptions =
// {
// 'maxWidth': '500',
// 'className': 'custom'
// };
//var marker = L.marker(new L.LatLng(data[i].Table.Latitude,
data[i].Table.Longitude, data[i].Table.Station));
var marker = L.marker(new L.LatLng(data1[i].Table.Latitude,
data1[i].Table.Longitude));
marker.bindPopup(customPopup);
pushMarker(marker);
}
}
function groupOne(data) {
//$.ajax({
// type: "GET",
// url: '',
// data:data,
// success: function (data, status, xhr) {
if (createdA == false) {
createMarkerA(data);
shownA = true;
createdA = true;
}
else if (shownA == false) {
for (var a = 0; a <= 2; a++) {
hideMarker(markers[a], a);
}
shownA = true;
}
else if (shownA == true) {
for (var aa = 3; aa <= 5; aa++) {
var i = aa - 3;
hideMarker(markers[aa], i);
}
shownA = false;
}
//}
//,
//error: function (xhr) {
// alert(xhr.responseText);
//}
//});
}
</script>
</head>
<body onLoad="javascript:init();">
<div id='test_map' style=" height: 800px; "></div>
Lee Yue Loong
Поделиться
0
<html>
<head>
<title>Leaflet geolocate example</title>
<link rel="stylesheet" href="https://npmcdn.com/[email protected]/dist/leaflet.css" />
<script src="https://npmcdn.com/[email protected]/dist/leaflet.js"></script>
<script language="javascript">
var map;
var markers = [];
var createdA = false;
var shownA = false;
var markersA = [];
var markersA = [];
var a1;
var a2;
var a5;
var center = L.bounds([39.61, -105.02], [39.77, -105.23]).getCenter();
function init() {
map = new L.Map('test_map').setView(new L.LatLng(center.x, center.y), 12);;
var basemap = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
detectRetina: true,
maxZoom: 20,
minZoom: 9
});
basemap.addTo(map);
var data = [];
var d1 = { Table: { Latitude: 39.61, Longitude: -105.02, Station: 'This is Littleton, CO.', Box: 'Box', LocationSend: 'testing1' } };
var d2 = { Table: { Latitude: 39.74, Longitude: -104.99, Station: 'This is Denver, CO.', Box: 'Box', LocationSend: 'testing2' } };
var d3 = { Table: { Latitude: 39.73, Longitude: -104.8, Station: 'This is Aurora, CO.', Box: 'Box', LocationSend: 'testing3' } };
var d4 = { Table: { Latitude: 39.733, Longitude: -104.821, Station: 'This is Littleton, CO.', Box: 'Box', LocationSend: 'testing4' } };
var d5 = { Table: { Latitude: 39.742, Longitude: -105.002, Station: 'This is Denver, CO.', Box: 'Box', LocationSend: 'testing5' } };
var d6 = { Table: { Latitude: 39.734, Longitude: -104.811, Station: 'This is Aurora, CO.', Box: 'Box', LocationSend: 'testing6' } };
data.push(d1);
data.push(d2);
data.push(d3);
data.push(d4);
data.push(d5);
data.push(d6);
markersA.push(L.marker(new L.LatLng(39.61, -105.02)));
markersA.push(L.marker(new L.LatLng(39.74, -104.99)));
markersA.push(L.marker(new L.LatLng(39.73, -104.8)));
map.addLayer(markersA[0]);
map.addLayer(markersA[1]);
map.addLayer(markersA[2]);
var myTimer = setInterval(function () {
groupOne(data);
}, 2000);
var markersLayer = L.layerGroup(markersA);
map.addLayer(markersLayer);
var controlSearch = new L.Control.Search({
position: 'topright',
layer: markersLayer,
initial: false,
zoom: 15,
marker: false
})
map.addControl(controlSearch);
}
function pushMarker(marker) {
markers.push(marker);
}
function createMarker(data) {
var marker = new L.marker([data[0], data[1]]);
pushMarker(marker);
}
function showMarker(marker) {
map.addLayer(marker);
}
function hideMarker(marker, i) {
var locate = marker.getLatLng();
markersA[i].setLatLng(locate);
}
function createMarkerA(data) {
var valid = true;
for (var i = 0; i < data.length; i++) {
var customPopup = 'Coordinates X: ' + data[i].Table.Latitude + '</br>Coordinates Z: ' + data[i].Table.Longitude + '</br>Station: ' + data[i].Table.Station + ' </br> Box: ' + data[i].Table.Box + '</br > Timestamp: ' + data[i].Table.LocationSend;
//var customOptions =
// {
// 'maxWidth': '500',
// 'className': 'custom'
// };
//var marker = L.marker(new L.LatLng(data[i].Table.Latitude, data[i].Table.Longitude, data[i].Table.Station));
var marker = L.marker(new L.LatLng(data[i].Table.Latitude, data[i].Table.Longitude));
marker.bindPopup(customPopup);
pushMarker(marker);
}
}
function groupOne(data) {
//$.ajax({
// type: "GET",
// url: '',
// data:data,
// success: function (data, status, xhr) {
if (createdA == false) {
createMarkerA(data);
shownA = true;
createdA = true;
}
else if (shownA == false) {
for (var a = 0; a <= 2; a++) {
hideMarker(markers[a],a);
}
shownA = true;
}
else if (shownA == true) {
for (var aa = 3;aa<=5;aa++) {
var i = aa - 3;
hideMarker(markers[aa], i);
}
shownA = false;
}
//}
//,
//error: function (xhr) {
// alert(xhr.responseText);
//}
//});
}
</script>
</head>
<body onLoad="javascript:init();">
<div id="test_map" style="height: 500px"></div>
</body>
</html>
LDS
Поделиться
-
0Я попробовал ваше решение, и оно работает, но когда я изменяю URL карты внезапно, карта не отображается
-
0Это может произойти из-за версии. Кстати, какой URL вы изменили
Показать ещё 8 комментариев
0
Просто я беру несколько статических точек, чтобы изменить точку без обновления страницы
<html>
<head>
<title>Leaflet geolocate example</title>
<link rel="stylesheet" href="https://npmcdn.com/[email protected]/dist/leaflet.css" />
<script src="https://npmcdn.com/[email protected]/dist/leaflet.js"></script>
<script language="javascript">
var map;
var markers = [];
var center = L.bounds([40.712, -74.227], [40.774, -74.125]).getCenter();
//alert(center.x);
function init() {
map = new L.Map('map');
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://openstreetmap.org">OpenStreetMap</a> contributors',
maxZoom: 18
}).addTo(map);
map.attributionControl.setPrefix(''); // Don't show the 'Powered by Leaflet' text.
var seconds = 0.005;
map.setView(new L.LatLng(center.x, center.y), 12);
setmarkers(seconds);
var myTimer = setInterval(function () {
center.x = center.x + seconds + 0.01;
center.y = center.y + seconds + 0.01;
getmarkers(seconds);
seconds = seconds + 0.01;
}, 2000);
}
function getmarkers(v) {
//alert(v);
for (var i = 0; i < 10; i++) {
var location = new L.LatLng(center.x + i * v, center.y + i * v);
markers[i].setLatLng(location);
markers[i].addTo(map);
}
}
function setmarkers(v) {
alert(v);
var radius = 30;
for (var i = 0; i < 10; i++) {
var location = new L.LatLng(center.x + i * v, center.y + i * v)
var mark = L.marker(location);
markers.push(mark);
}
}
function onLocationFound(e) {
var radius = e.accuracy / 2;
radius = 30;
var location = e.latlng
L.marker(location).addTo(map)
L.circle(location, radius).addTo(map);
alert(location.lat);
alert(location.lng);
addinlocations(location);
}
function onLocationError(e) {
alert(e.message);
}
function getLocationLeaflet() {
map.on('locationfound', onLocationFound);
map.on('locationerror', onLocationError);
map.locate({ setView: true, maxZoom: 16 });
}
function pushMarker(marker) {
markers.push(marker);
}
function addinlocations(pot) {
for (var i = 0; i < 10; i++) {
var nmarker = new L.LatLng(pot.lat + i * 0.5, pot.lng * 0.5);
var radius = 20;
var location = nmarker
L.marker(location).addTo(map)
L.circle(location, radius).addTo(map);
// pushMarker(nmarker);
}
}
</script>
</head>
<body onLoad="javascript:init();">
<div id="map" style="height: 500px"></div>
<input type="button" value="Locate me!" onClick="javascript:getLocationLeaflet();">
</body>
</html>
LDS
Поделиться
-
0Это не работает для меня, я хотел бы это так, что если lat и long изменяет местоположение маркера, будет обновлен
-
0map.removeLayer (маркер) -> это не работает для меня. Так что это может не сработать для вас. Используя эту функцию, я использую ее как маркеры [i] .setLatLng (location); Если вы получаете данные из базы данных для обновления местоположения, которое вы разрабатываете, необходимо обновить. Но если вы вызываете AJAX из временного интервала, не нужно обновлять. Хорошо, я пытаюсь решить в вашем коде в моей системе. Пожалуйста, подождите
Ещё вопросы
- 1Что такое «несвязанный префикс» в Android Studio / Java / XML?
- 0Внедренное видео в ios, предотвращающее функциональность navbar jquery mobile
- 1Сохранить изображение поверх существующего изображения
- 0php @ Azure Веб-сайт: не могу написать в% TMP%
- 1Форматировать строку даты в JavaScript
- 0AngularJS - запись в динамические переменные области видимости
- 1почтальон, возвращающий 404 для конечной точки node.js
- 0Jquery slidetoogle несколько делений
- 0Как максимизировать и минимизировать div на клике в jquerymobile
- 0Редактировать в состоянии выбрать поле с группировкой в настройках
- 1Откройте PDF, если он уже загружен, если нет, загрузите PDF, используя менеджер загрузок
- 1Как создать проект узла, используя npm init? Застрял в версии
- 1Будет ли запускать отдельный поток, который использует метод из основного потока, по-прежнему запускать его в основном потоке? (С #)
- 0как преобразовать объект в массив, исключая зависимости в php
- 0MySQL вопрос проблема с PHP
- 1ПИТОН Как сделать «ассоциативный массив»
- 0Uncaught TypeError: undefined не является функцией в AngularJS
- 0Вызов метода производного класса из общей ссылки на базовый класс
- 0не может получить 2-й дататабельно свой собственный CSS
- 0QRegularExpressionMatch потребление памяти
- 0Нажмите кнопки и показать текст (и скрыть предыдущий текст)
- 1Выполнение пакетного файла с зависимостью пути в c #
- 1Eclipse plugin dev - Как добавить гиперссылку на FieldEditorPreferencePage
- 1разделение значения и отображение в отформатированном виде
- 0Проверьте числовое значение, но исключите шестнадцатеричное или научное обозначение
- 1Android Studio - setBackground ()
- 1Написать ключ для разделения CSV на основе значения в словаре
- 1Панды read_csv для gziped файла не выводят числовые типы столбцов
- 1Выберите / Option / Value при изменении, используя Classic ASP
- 0как помешать yii2 выполнить запрос select при вызове Yii :: $ app-> user-> id
- 1Когда не все ваши функции полиморфны
- 1Отложите HTTP-запросы Node.js, если аналогичная работа уже выполняется
- 0Добавить / установить заголовок элемента <li>
- 0Вставка данных в базу данных через MySQL с использованием Visual Studio в C #
- 1Кэширование в памяти с ограничением по времени в python
- 0Ссылки работают в браузере, но не работают в iPad
- 1Как условно покрасить ячейки Excel вывода в Python?
- 0ngResource save () странное поведение
- 1Не удается запустить службу SQLBrowser на компьютере '.'
- 1Есть ли Java-эквивалент службы Windows
- 0Ошибка компилятора при использовании find () на векторе C ++
- 1Ionic 2 Angular 2 - не удается получить доступ к NavController из метода
- 1Форма не сохраняет данные в модель
- 0отображение заполнителя в текстовом поле формы
- 0Проверка RegEx для динамически создаваемых элементов с использованием JavaScript
- 1Как назначить значение формата ARGB (например, 0xFFFF0000) для Kotlin INT
- 0Dojo документация альтернатива
- 0Почему я не могу использовать службу $ http в разрешении маршрута?
- 0__try и __except не работают в сборке релиза
- 0параметр для пользовательских ссылок в jqgrid
