admin管理员组

文章数量:1327945

I am working on a Leaflet map and markers.

I am getting markers latlng from JSON and showing it correctly.

getLatLng()

function getLatLng() {
  var details = '/equipment/api/getLatLong';
  $.ajax({
    url: details,
    method: 'get'
  }).done(function(response) {

    $('.subSection').html('').append('<section><button type="button" onclick="hideEquipmentDetails()"><i class="fa fa-times"></i></button></section>');
    var equipmentDetails = response.data.filters;
    console.log(equipmentDetails)
    $.each(equipmentDetails, function(i, value) {
      L.marker([value.latitude, value.longitude]).addTo(map).bindPopup('<b><span> Name:</span>' + value.name + '</b>');
    })
  });
}

setInterval(function() {
  getLatLng();
}, 5000)

I am refreshing the method for every 5 seconds.

So I need to show the markers in updated latlng and old markers should be hidden.

setInterval(function() {
  //L.marker.setOpacity(0);
  //L.markerClusterGroup()
  //markers.clearLayers();
  //map.removeLayer(L.marker);
  //markers.removeLayer()
  //L.marker().removeTo(map);
  getLatLng();
}, 5000)

I tried every options to achieve this but I couldn't.

Is there any other way to do it?

Otherwise should I define one more array to store the initial latlng values then to check each time whether latlng is changed or not (in this scenario I can replace only updated latlng markers right?No need to replace all markers every time right?)

I am working on a Leaflet map and markers.

I am getting markers latlng from JSON and showing it correctly.

getLatLng()

function getLatLng() {
  var details = '/equipment/api/getLatLong';
  $.ajax({
    url: details,
    method: 'get'
  }).done(function(response) {

    $('.subSection').html('').append('<section><button type="button" onclick="hideEquipmentDetails()"><i class="fa fa-times"></i></button></section>');
    var equipmentDetails = response.data.filters;
    console.log(equipmentDetails)
    $.each(equipmentDetails, function(i, value) {
      L.marker([value.latitude, value.longitude]).addTo(map).bindPopup('<b><span> Name:</span>' + value.name + '</b>');
    })
  });
}

setInterval(function() {
  getLatLng();
}, 5000)

I am refreshing the method for every 5 seconds.

So I need to show the markers in updated latlng and old markers should be hidden.

setInterval(function() {
  //L.marker.setOpacity(0);
  //L.markerClusterGroup()
  //markers.clearLayers();
  //map.removeLayer(L.marker);
  //markers.removeLayer()
  //L.marker().removeTo(map);
  getLatLng();
}, 5000)

I tried every options to achieve this but I couldn't.

Is there any other way to do it?

Otherwise should I define one more array to store the initial latlng values then to check each time whether latlng is changed or not (in this scenario I can replace only updated latlng markers right?No need to replace all markers every time right?)

Share Improve this question edited Feb 21, 2018 at 9:52 ghybs 53.4k6 gold badges86 silver badges114 bronze badges asked Feb 21, 2018 at 7:34 lazlaz 2918 silver badges18 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 7

Instead of instantiating a new marker on every update, you could simply modify its position using its setLatLng() method.

The usual implementation is to use a "global" marker variable (just in a scope outside your update function is enough), initialize it to a Marker on your first iteration, then instead of instantiating a new one, simply modify its position.

The possibly slightly trickier part is to manage several markers at the same time. You need some sort of identification mean to know which one to update. I assume it is your value.name:

var markers = {}; // Dictionary to hold your markers in an outer scope.

function ajaxCallback(response) {
  var equipmentDetails = response.data.filters;
  $.each(equipmentDetails, function(i, value) {
    var id = value.name;
    var latLng = [value.latitude, value.longitude];
    var popup = '<b><span> Name:</span>' + id + '</b>';

    if (!markers[id]) {
      // If there is no marker with this id yet, instantiate a new one.
      markers[id] = L.marker(latLng).addTo(map).bindPopup(popup);
    } else {
      // If there is already a marker with this id, simply modify its position.
      markers[id].setLatLng(latLng).setPopupContent(popup);
    }
  });
}

$.ajax({
  url: details,
  method: 'get'
}).done(ajaxCallback);

本文标签: javascriptHow to update leaflet markers for every 5 secondsStack Overflow