我有一个简单的流星应用程序，它使用mongo和谷歌地图API来显示地图上存储的位置。有一个按钮调用insert方法将位置插入数据库，但有时它会插入相同的位置两次。我偶尔在多个设备上遇到过这个问题，这使得很难排除故障或找出问题的根源。
有问题的方法：
if (Meteor.isServer) {
Meteor.methods({
'markers.insert'(position) {
// Make sure the user is logged in before inserting a task
if (! Meteor.userId()) {
throw new Meteor.Error('not-authorized');
}
console.log("Marker location received for insert.");
Markers.insert({
position: position,
createdAt: new Date(),
owner: Meteor.userId(),
username: Meteor.user().profile.name,
});
},
...
调用方法的代码：
Template.MapPage.events({
'click .needle-btn': ()=> {
if (Position == null) {
alert("Location services not enabled :(")
}
if (Meteor.userId() != null) {
console.log("inserting");
Meteor.call('markers.insert',Position);
}
},
"click [data-action='needle/pickup']": ()=> {
var marker_id = event.target.getAttribute('id');
pickUp(marker_id);
},
"click [data-action='needle/mark']": ()=> {
var marker_id = event.target.getAttribute('id');
markForPickUp(marker_id);
}
});
按钮的HTML：
<template name="MapPage">
<div class="map-container">
{{> googleMap name="map" options=mapOptions}}
<a style="text-align:center;" class="over_map">
{{#if currentUser }}
<button class="needle-btn btn btn-warning btn-lg btn-responsive">Needle</button>
{{/if}}
</a>
</div>
</template>
任何有关该方法执行两次的建议都将非常感谢！ 我已经尝试将这些方法移动到一个单独的文件中，将它们放在Meteor.isServer之外，内部等等。
谢谢！
编辑： 整个map.js文件：
import map_style from './map_style.js';
import { Markers } from '../api/methods.js';
Position = null;
function onPositionRecieved(position) {
console.log(position);
Position = { lat: position.coords.latitude, lng: position.coords.longitude };
// center = new google.maps.LatLng(Position);
// GoogleMaps.maps.map.options.center = center;
}
function pinSymbol(color) {
return {
path: 'M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z',
fillColor: color,
fillOpacity: 1,
strokeColor: '#000',
strokeWeight: 2,
scale: 2
};
}
function onPositionNotReceived(positionError) {
console.log(positionError);
alert(positionError.message);
}
function get_location() {
var position = {}
if (navigator.geolocation) {
navigator.geolocation.watchPosition(onPositionRecieved,onPositionNotReceived);
}
}
function checkIsUser() {
if (!Meteor.user()) {
Router.go("/");
}
}
function pickUp(marker_id) {
Meteor.call('markers.pickup',marker_id);
console.log("Needle picked up. ID: " + String(marker_id));
}
function markForPickUp(marker_id) {
Meteor.call('markers.markforpickup',marker_id);
}
if (Meteor.isClient) {
Template.MapPage.onCreated(function() {
checkIsUser();
get_location();
console.log("Click watch int.");
Template.MapPage.events({
'click .needle-btn': ()=> {
if (Position == null) {
alert("Location services not enabled :(")
}
if (Meteor.userId() != null) {
console.log("inserting");
Meteor.call('markers.insert',Position);
}
},
"click [data-action='needle/pickup']": ()=> {
var marker_id = event.target.getAttribute('id');
pickUp(marker_id);
},
"click [data-action='needle/mark']": ()=> {
var marker_id = event.target.getAttribute('id');
markForPickUp(marker_id);
}
});
GoogleMaps.ready('map', function(map) {
var markers = {};
Markers.find().observe({
added: function (document) {
console.log(document);
var marker = new google.maps.Marker({
draggable: true,
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(document.position.lat, document.position.lng),
map: map.instance,
id: document._id,
icon: pinSymbol('red')
});
if (document.hasOwnProperty('icon')) {
marker.setIcon(document.icon);
}
var infowindow = new google.maps.InfoWindow({
content: `<div class="infodiv">
<h1>Picked up?</h1>
<div class="btn-group special" role="group">
<button id="` + marker.id + `" data-action="needle/pickup" type="button" class="btn btn-secondary btn-success"><h2 id="` + marker.id + `">Yes</h2></button>
<button id="` + marker.id + `" data-action="needle/mark" type="button" class="btn btn-secondary btn-danger"><h2 id="` + marker.id + `">No</h2></button>
</div>
</div>
`
});
google.maps.event.addListener(marker, 'dragend', function(event) {
Meteor.call('markers.updatelocation', marker.id, event.latLng.lat(), event.latLng.lng());
});
google.maps.event.addListener(marker, 'click', function(event) {
infowindow.open(map,marker);
console.log("Marker Clicked");
});
markers[document._id] = marker;
},
changed: function (newDocument, oldDocument) {
markers[newDocument._id].setPosition({ lat: newDocument.position.lat, lng: newDocument.position.lng });
if (newDocument.icon != null) {
markers[newDocument._id].setIcon(newDocument.icon);
}
},
removed: function (oldDocument) {
markers[oldDocument._id].setMap(null);
google.maps.event.clearInstanceListeners(markers[oldDocument._id]);
delete markers[oldDocument._id];
}
});
});
});
Meteor.startup(function() {
GoogleMaps.load({key: 'KEYOMITTED'});
});
Template.MapPage.helpers({
mapOptions: function() {
if (GoogleMaps.loaded()) {
return {
center: new google.maps.LatLng(40.803187, -124.160748),
zoom: 16,
styles: map_style
};
}
}
});
}
if (Meteor.isServer) {
Meteor.methods({
'markers.insert'(position) {
// Make sure the user is logged in before inserting a task
if (! Meteor.userId()) {
throw new Meteor.Error('not-authorized');
}
console.log("Woohoo");
if (Meteor.isServer) {
Markers.insert({
position: position,
createdAt: new Date(),
owner: Meteor.userId(),
username: Meteor.user().profile.name,
});
}
},
'markers.remove'(markerId) {
check(markerId, String);
// Make sure the user is logged in before inserting a task
if (! Meteor.userId()) {
throw new Meteor.Error('not-authorized');
}
Markers.remove(markerId);
},
'markers.pickup'(markerId) {
check(markerId, String);
// Make sure the user is logged in before inserting a task
if (! Meteor.userId()) {
throw new Meteor.Error('not-authorized');
}
Markers.update(markerId,
{ $set: { icon: pinSymbol('green') }},
function (err, result) {
if (err) throw err;
console.log(result);
}
);
},
'markers.markforpickup' (markerId) {
// Make sure the user is logged in before inserting a task
if (! Meteor.userId()) {
throw new Meteor.Error('not-authorized');
}
if (markerId != null) {
Markers.update(markerId,
{ $set: { icon: pinSymbol('red') }},
function (err, result) {
if (err) throw err;
console.log(result);
}
);
console.log("Needle marked for pickup. ID: " + String(markerId));
}
else {
console.log("Null needle ID!");
}
},
'markers.updatelocation'(markerId,lat_in,lng_in) {
// Make sure the user is logged in before inserting a task
if (! Meteor.userId()) {
throw new Meteor.Error('not-authorized');
}
console.log(markerId,lat_in,lng_in);
Markers.update(markerId,
{ $set: { position: { lat: lat_in, lng: lng_in } }},
function (err, result) {
if (err) throw err;
console.log(result);
}
);
}
});
}