Benötigen Sie Popup-Faltblatt zum Hinzufügen

Question

Dies ist meine Json Antwort von URL helfen:

{ 
     "geometry": { 
      "type": "Point", 
      "coordinates": [ 
       -1.480921, 
       52.979698 
      ], 
      "Timestamp": "2017-07-09T09:21:30", 
      "GatewayID": 193, 
      "Speed": 94.9, 
      "Heading": 157 
     }, 
     "type": "Feature", 
     "properties": {} 
    } 

Dies ist meine js-Datei:

var map = L.map('map', { 
    'center': [0, 0], 
    'zoom': 0, 
    'layers': [ 
    L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', { 
     'attribution': 'Map data © OpenStreetMap contributors' 
    }) 
    ] 
}); 

var geojsonMarkerOptions = { 
    radius: 18, 
    fillColor: "#ff7800", 
    color: "#000", 
    weight: 1, 
    opacity: 1, 
    fillOpacity: 0.8 
}; 

var realtime = L.realtime({ 
    url: 'http://127.0.0.1:8000/mongo/getgpsdata/', 
    crossOrigin: true, 
    type: 'json' 
}, { 
    interval: 3 * 1000, 
    pointToLayer: function (feature, latlng) { 
     return L.circleMarker(latlng) 
    } 

}).addTo(map); 

realtime.on('layeradd', function(e) { 
    var coordPart = function(v, dirs) { 
      return dirs.charAt(v >= 0 ? 0 : 1) + 
       (Math.round(Math.abs(v) * 100)/100).toString(); 
     }, 
     popupContent = function(fId) { 
      var feature = e.features[fId], 
       c1 = feature.geometry.Speed 
       c2=feature.geometry.Timestamp 
       c = feature.geometry.coordinates; 
      return '<b>coord: </b>' +c + '<br><b>Speed:</b> '+c1 + '<br><b>Time: </b>' + c2; 
     }, 
     bindFeaturePopup = function(fId) { 
      realtime.getLayer(fId).bindPopup(popupContent(fId)); 
     }, 
     updateFeaturePopup = function(fId) { 
      realtime.getLayer(fId).getPopup().setContent(popupContent(fId)); 
     }; 

    map.fitBounds(realtime.getBounds(), {maxZoom: 30}); 

    Object.keys(e.enter).forEach(bindFeaturePopup); 
    Object.keys(e.update).forEach(updateFeaturePopup); 
}); 

Es funktioniert völlig in Ordnung, aber es zeigen wird nicht die Pop-ups, aber wenn Ich gebe "update" anstelle von "layeradd", dann gibt es mir die Popups, aber die historischen Daten sind verloren, da sie jedes Mal aktualisiert werden.

Jede Hilfe wäre toll, Danke!

Answer 1

Fügen Sie bindPopup hinzu, während Sie den Marker zurückgeben, das hat für mich funktioniert.

return L.circleMarker(latlng).bindPopup("your content")