Warning: file_get_contents(/data/phpspider/zhask/data//catemap/4/json/14.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 需要添加弹出式宣传单的帮助吗_Javascript_Json_Leaflet - Fatal编程技术网

Javascript 需要添加弹出式宣传单的帮助吗

Javascript 需要添加弹出式宣传单的帮助吗,javascript,json,leaflet,Javascript,Json,Leaflet,这是我对URL的json响应: { "geometry": { "type": "Point", "coordinates": [ -1.480921, 52.979698 ], "Timestamp": "2017-07-09T09:21:30", "GatewayID": 193,

这是我对URL的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);
});
var map=L.map('map'{
“中心”:[0,0],
“缩放”:0,
“层”:[
L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png'{
“属性”:“地图数据©;OpenStreetMap参与者”
})
]
});
var geojsonMarkerOptions={
半径:18,
fillColor:#ff7800“,
颜色:“000”,
体重:1,
不透明度:1,
填充不透明度:0.8
};
var realtime=L.realtime({
网址:'http://127.0.0.1:8000/mongo/getgpsdata/',
交叉起源:对,
键入:“json”
}, {
间隔:3*1000,
pointToLayer:功能(特性、latlng){
返回L.circleMarker(车床)
}
}).addTo(地图);
realtime.on('layeradd',函数(e){
var coordPart=函数(v,dirs){
返回指令字符(v>=0?0:1)+
(数学圆整(数学abs(v)*100)/100.toString();
},
popupContent=函数(fId){
var特征=e.特征[fId],
c1=特征、几何、速度
c2=特征.geometry.Timestamp
c=特征、几何、坐标;
返回“坐标:”+c+”
速度:“+c1+”
时间:“+c2”; }, bindFeaturePopup=函数(fId){ realtime.getLayer(fId).bindpoop(popupContent(fId)); }, updateFeaturePopup=函数(fId){ getLayer(fId).getPopup().setContent(popupContent(fId)); }; fitBounds(realtime.getBounds(),{maxZoom:30}); Object.key(e.enter).forEach(bindfeaturepoop); Object.key(例如update.forEach(updateFeaturePopup); });
它工作得非常好,但是它不会显示弹出窗口,但是如果我用“更新”代替“layeradd”,那么它会显示弹出窗口,但是历史数据会丢失,因为它每次都会更新


任何帮助都会很好,谢谢

在返回标记时添加bindPopup,这对我很有效

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

在返回标记时添加bindPopup,这对我很有效

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