需要有关添加弹出式传单的帮助

时间:2017-07-09 09:57:33

标签: javascript json leaflet

这是我在网址上的json回复:

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

这是我的js文件:

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);
});

它工作得非常好,但它不会显示弹出窗口,但如果我提供更新&#39;代替layeradd&#39;然后它给了我弹出窗口,但历史数据丢失,因为它每次都会更新。

任何帮助都会很棒,谢谢!

1 个答案:

答案 0 :(得分:2)

在返回Marker时添加bindPopup,这对我有用。

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