1
비컨 컬렉션에지도에 표시하고 싶은 컬렉션이 있습니다. 그들의 위치가 응용 프로그램의 모든 인스턴스간에 동기화되기를 원합니다.Parse LiveQuery Subscription은 항상 이전 버전을 수신합니다.
즉, 비컨을 다른 위치로 이동하면이 변경 사항이 다른 애플리케이션 인스턴스에 반영되기를 원합니다.
Parse javascript SDK 버전 1.11.0을 사용합니다.
var Baliza = Parse.Object.extend("Balizas");
Baliza.prototype.show = function(){
var self = this;
var start= '<div class="row" style="width: 350px;">\n' +
' <div class="control-group" id="fields">\n' +
' <label class="control-label" style="text-align: center;" for="field1">Introducir Mac Asociadas a Ese Punto</label>\n' +
' <div class="controls">\n' +
' <form id="form" role="form" autocomplete="off">';
var tmp = '';
tmp = tmp + '<div class="entry input-group col-xs-12">\n' +
' <input class="form-control" name="fields[]" type="text" value="'+self.get("mac")[0]+'">\n' +
' <span class="input-group-btn">\n' +
' <button baliza-id='+self.id+' class="btn btn-success btn-add" type="button">\n' +
' <span class="glyphicon glyphicon-plus"></span>\n' +
' </button>\n' +
' </span>\n' +
' </div>';
if (self.get("mac").length>1){
for (var i=1; i<self.get("mac").length; i++) {
tmp = tmp + '<div class="entry input-group col-xs-12">\n' +
' <input class="form-control" name="fields[]" type="text" value="'+self.get("mac")[i]+'">\n' +
' <span class="input-group-btn">\n' +
' <button baliza-id='+self.id+' class="btn btn-remove col-xs-12" type="button">\n' +
' <span class="glyphicon glyphicon-minus"></span>\n' +
' </button>\n' +
' </span>\n' +
' </div>';
}
}
var end = '</form>\n' +
' <br>\n' +
' <button type="button" baliza-id='+self.id+' class="btn btn-block btn-info btn-sm ">Salvar</button>\n' +
' <button type="button" baliza-id='+self.id+' class="btn btn-block btn-danger btn-sm ">Eliminar</button>\n' +
' </div>\n' +
' </div>\n' +
'</div>';
//console.log('impirmiendo marker');
//console.log(this.marker);
console.log("Localización -> ", self.get("localizacion"));
if(self.marker != null) {
self.marker.setLatLng(new L.LatLng(self.get("localizacion").latitude, self.get("localizacion").longitude),{draggable:'true'});
} else {
self.marker = new L.marker([ self.get("localizacion").latitude, self.get("localizacion").longitude], {
icon: L.AwesomeMarkers.icon({icon: 'certificate', prefix: 'glyphicon', markerColor: 'blue'}),
draggable: 'true'
}).bindPopup("", {maxWidth: 560});
self.marker.on('dragend', function(event){
var position = event.target.getLatLng();
console.log("Notify new Location -> ", position.lat, position.lng);
//Enviamos El Dato a Parse
this.set("localizacion", new Parse.GeoPoint(position.lat, position.lng));
this.save(null, {
success: function (balizaSaved) {
console.log("Baliza Guardad con éxito: ", balizaSaved);
},
error: function (baliza, error) {
alert('Failed to create new object, with error code: ' + error.message);
}
});
}.bind(this));
map.addLayer(self.marker);
}
self.marker.getPopup().setContent(start+tmp+end);
};
지도에서 위치의 변화를 알리는 담당하는 코드는 다음과 같습니다 :
I는 서버에 저장 컬렉션의 각 개체를 나타내는 다음 구문 분석 모델을 정의
self.marker.on('dragend', function(event){
var position = event.target.getLatLng();
console.log("Notify new Location -> ", position.lat, position.lng);
//Enviamos El Dato a Parse
this.set("localizacion", new Parse.GeoPoint(position.lat, position.lng));
this.save(null, {
success: function (balizaSaved) {
console.log("Baliza Guardad con éxito: ", balizaSaved);
},
error: function (baliza, error) {
alert('Failed to create new object, with error code: ' + error.message);
}
});
}.bind(this));
구독이 다음과 같이 생성되었다
var query = new Parse.Query(Baliza);
var subscription = query.subscribe();
var mapaBalizasParse = new Map();
// After specifying the Monster subclass...
//Parse.Object.registerSubclass('Balizas',Baliza);
subscription.on('create', function (balizaCreated) {
console.log("New baliza created -> ", balizaCreated.toJSON());
var baliza = new Baliza(balizaCreated.toJSON());
baliza.show();
mapaBalizasParse.set(baliza.id, baliza);
});
subscription.on('update', function (balizaSaved) {
console.log('BALIZA ACTUALIZADA -> ', balizaSaved.toJSON());
var baliza = mapaBalizasParse.get(balizaSaved.id);
baliza.set("mac", balizaSaved.get("mac"));
baliza.set("localizacion", balizaSaved.get("localizacion"));
baliza.show();
});
subscription.on('delete', function (baliza) {
//console.log(mapaBalizasParse.get(baliza.id));
map.removeLayer(mapaBalizasParse.get(baliza.id).marker);
mapaBalizasParse.delete(baliza.id);
});
subscription.on('leave', function (balizaLeave) {
console.log('Leave called -> ', balizaLeave.id, balizaLeave.get("localizacion"));
});
subscription.on('enter', function (balizaCalled) {
console.log('Enter called -> ', balizaCalled.id, balizaCalled.get("localizacion"));
});
function onMapClick(e) {
var baliza = new Baliza();
baliza.set("localizacion",new Parse.GeoPoint(e.latlng.lat, e.latlng.lng));
baliza.set("mac",["11:22:33:44:55:10"]);
baliza.set("editando",true);
baliza.save(null, {
success: function(baliza) {
//Añadimos La Baliza Al Mapa Interno
//mapaBalizasParse.set(baliza.id,baliza);
//baliza.show();
},
error: function(baliza, error) {
alert('Failed to create new object, with error code: ' + error.message);
}
});
}
현재 등록 "비콘"의 목록이 표시됩니다 : 다음과 같이 나는지도상의 위치를 클릭 23,516,
때마다 나는 비콘을 만들
query.find({
success: function(results) {
console.log("Total Balizas -> " + results.length);
for (var i = 0; i < results.length; i++) {
var currentBaliza = results[i];
console.log("Baliza " + i + " -> ", currentBaliza);
currentBaliza.show();
mapaBalizasParse.set(currentBaliza.id, currentBaliza);
}
},
error: function(error) {
console.log("Error: " + error.code + " " + error.message);
}
});
문제는 예를 들어 위치 (위도 : 40.961229844235234, 경도 : -5.669621229171753)에서지도의 다른 지점 (위도 : 40.9604196476232, 경도 : -5.6707102060318)으로 이동하면
응용 프로그램의개다른 인스턴스가 업데이트 이벤트 객체의 이전 버전을받을 위치 필드는 변경되지 않았습니다 (위도 : 40.961229844235234, 경도 : -5.669621229171753)
누군가가 내가 '무엇을 말해 줄 수 코드에서 잘못하고있다.
미리 감사드립니다.