我有一个我想在地图上显示的信标的集合。我希望他们的职位在应用程序的所有实例之间同步。
也就是说，当我将信标移动到另一个位置时，我希望在应用程序的其他实例中反映此更改。
使用 parse JavaScript SDK 在其版本1.11.0中。
我已经定义了以下 parse模型，该模型表示服务器上保存的集合中的每个对象：
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);
};
负责通知地图中位置更改的代码如下：
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);
}
});
}
当前注册的" 信标"的列表如下：
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
该应用程序的其他实例在更新事件中接收到的旧版本其位置字段尚未更改（纬度：40.961229844235234，经度：-5.66962122222222222222222222222222222271753）
有人可以告诉我我在代码中做错了什么。
预先感谢。
我一直在使用最小配置进行一些测试，这就是我看到的：
在映射集中加载所有信标的回调中，您使用此代码：
var beacon = new Baliza({id: baliza.id, localizacion:
baliza.get("localizacion") , mac: baliza.get("mac"), editando:
baliza.get("editando")});
但是，当您添加在"创建"事件的回调中创建的新信标时，您可以使用此：
var beacon = new Baliza();
beacon.id = baliza.id;
beacon.localizacion = baliza.get("localizacion");
beacon.mac = baliza.get("mac");
beacon.editando = baliza.get("editando");
在我的测试中，如果您使用第一个代码，则信标通常会更新，但是如果您使用第二个代码，则使用JavaScript Console记录了Beacon的旧版本。
似乎在空的构造函数中您不包括在超载构造函数中发生了一些特殊的事情。
我希望它对您有所帮助。：）
在这里我的完整代码：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple test parse JS</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<input type="text" id="txtIndex" class="textbox" value="1">
<button type="button" class="btn-add">Add beacon</button>
<button type="button" class="btn-modify">Modify beacon</button>
<button type="button" class="btn-remove">Remove beacon</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://chancejs.com/chance.min.js"></script>
<script src="https://unpkg.com/parse@1.11.0/dist/parse.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Own JS-->
<script src="./js/demo_parse.js"></script>
</body>
</html>
JS
var mapBeacons = new Map();
var query;
var subscription;
var Baliza;
function loadAllBeacons(){
query.find({
success: function(results) {
for (var i = 0; i < results.length; i++) {
//Vamos Creando Los Objetos Que Recibimos
var beacon = new Baliza();
beacon.id = results[i].id;
beacon.localizacion = results[i].get("localizacion");
beacon.mac = results[i].get("mac");
mapBeacons.set(beacon.id,beacon);
}
},
error: function(error) {
console.log("Error: " + error.code + " " + error.message);
}
});
}
function modifyBeacon(){
var key = $("#txtIndex").val();
var baliza = mapBeacons.get(key);
var my_chance = new Chance();
var randomLocation = new Parse.GeoPoint(my_chance.latitude(), my_chance.longitude())
baliza.set("localizacion",randomLocation);
baliza.save(null, {
success: function(baliza) {
// Execute any logic that should take place after the object is saved.
mapBeacons.set(baliza.id,baliza);
},
error: function(baliza, error) {
// Execute any logic that should take place if the save fails.
// error is a Parse.Error with an error code and message.
alert('Failed to remove new object, with error code: ' + error.message);
}
});
}
function removeBeacon(){
var key = $("#txtIndex").val();
var baliza = mapBeacons.get(key);
baliza.destroy({
success: function(myObject) {
// The object was deleted from the Parse Cloud.
//map.removeLayer(baliza.marker);
//mapaBalizasParse.delete($(this).attr('id'));
console.log("Beacon removed sucessfully");
console.log(myObject);
},
error: function(myObject, error) {
// The delete failed.
// error is a Parse.Error with an error code and message.
}
});
}
function addNewBeacon(){
var baliza = new Baliza();
var my_chance = new Chance();
var randomLocation = new Parse.GeoPoint(my_chance.latitude(), my_chance.longitude())
baliza.set("localizacion",randomLocation);
baliza.set("mac",["11:22:33:44:55:10"]);
baliza.set("editando",true);
baliza.save(null, {
success: function(baliza) {
console.log("OnSave Beacon saved sucessfully");
console.log(baliza);
},
error: function(baliza, error) {
alert('Failed to create new object, with error code: ' + error.message);
}
});
}
$(function() {
console.log( "ready!" );
//Init parse
Parse.initialize("6xuPkPgqEfCdzXwaxAfUuKbTAglJL5ALa1mmY8de");
Parse.serverURL = 'http://encelocalizacion.com:1337/parse';
//Objeto Ppara interacturar con el Objeto Baliza de Parser
Baliza = Parse.Object.extend("Balizas", {
/**
* Instance properties go in an initialize method
*/
id: '',
localizacion: '',
mac:'',
marker:'',
popup:'',
initialize: function (attr, options) {
}
});
query = new Parse.Query(Baliza);
subscription = query.subscribe();
// Subscription for create
subscription.on('create', function (baliza) {
// TODO CHANGE THIS
var beacon = new Baliza({id: baliza.id, localizacion: baliza.get("localizacion") , mac: baliza.get("mac"), editando: baliza.get("editando")});
/*
var beacon = new Baliza();
beacon.id = baliza.id;
beacon.localizacion = baliza.get("localizacion");
beacon.mac = baliza.get("mac");
beacon.editando = baliza.get("editando");
*/
mapBeacons.set(beacon.id,beacon);
console.log("New beacon added to BBDD")
console.log(mapBeacons)
});
// Subscription for update
subscription.on('update', function (kk) {
console.log('Updated beacon:' + kk.get("localizacion").latitude + " " + kk.get("localizacion").longitude + " " + kk.get("mac")+ " " + kk.get("id"));
});
// Subscription for delete
subscription.on('delete', function (kk) {
mapBeacons.delete(kk.id);
console.log('Deleted beacon:' + kk.get("localizacion").latitude + " " + kk.get("localizacion").longitude + " " + kk.get("mac"));
console.log(mapBeacons)
});
loadAllBeacons();
$(document).on('click', '.btn-add', function(e) {
addNewBeacon();
}).on('click', '.btn-remove', function(e) {
removeBeacon();
return false;
}).on('click', '.btn-modify', function(e) {
modifyBeacon();
});
});