Javascript 需要添加弹出式宣传单的帮助吗
这是我对URL的json响应: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,
{
"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")