Question

我想在Leaflet地图上使用可拖动标记，并将其新位置实时分发给客户端。我用流星。为此，我观察了标记集合。这是我到目前为止所尝试的但是当我拖动一个标记时它会崩溃。所选标记会按原样消失，但不会重新渲染地图上的markersGroup。

  var newMarker;
  var markers = [];
  Happening.find({}).observe({
    added: function(marker) {
      var myIcon;
      myIcon = L.icon({
        iconUrl: "icon_33997.svg"      
      });

     newMarker = L.marker([marker.location.coordinates[1],marker.location.coordinates[0]], {
        icon: myIcon,
        _id: marker._id,
        draggable: true
      });

      newMarker.on('dragend', function (e){
        var newCoords = this.getLatLng();
        var happeningOld = Happening.find({_id: e.target.options._id}).fetch();
        return Happening.update({_id: e.target.options._id}, {
          item: happeningOld[0].item,
          location: {
            type: 'Point',
            coordinates: [newCoords.lng, newCoords.lat]
          },
          time: Date.now(),
          owner: happeningOld[0].owner
        });

      });

      markers[newMarker.options._id] = newMarker;
      markersGroup.addLayer(newMarker);
      return map.addLayer(markersGroup);
    },
    changed: function(marker){
      map.removeLayer(markersGroup);
      markersGroup.removeLayer(markers[marker._id]);
      markersGroup.addLayer(markers[marker._id]);

      return map.addLayer(markersGroup);
    }
  });

这是崩溃报告：

Exception in queued task: L.DistanceGrid.prototype._sqDist@http://localhost:3000/packages/leaflet-markercluster.js?d3d9bebcb9f8a1b1711174aea16a51003ba02d10:36
L.DistanceGrid.prototype.getNearObject@http://localhost:3000/packages/leaflet-markercluster.js?d3d9bebcb9f8a1b1711174aea16a51003ba02d10:36
L.MarkerClusterGroup<._addLayer@http://localhost:3000/packages/leaflet-markercluster.js?d3d9bebcb9f8a1b1711174aea16a51003ba02d10:36
L.MarkerClusterGroup<.addLayers/l<@http://localhost:3000/packages/leaflet-markercluster.js?d3d9bebcb9f8a1b1711174aea16a51003ba02d10:36
o.Util.bind/<@http://localhost:3000/packages/leaflet.js?ad7b569067d1f68c7403ea1c89a172b4cfd68d85:37
L.MarkerClusterGroup<.addLayers@http://localhost:3000/packages/leaflet-markercluster.js?d3d9bebcb9f8a1b1711174aea16a51003ba02d10:36
L.MarkerClusterGroup<.onAdd@http://localhost:3000/packages/leaflet-markercluster.js?d3d9bebcb9f8a1b1711174aea16a51003ba02d10:36
o.Map<._layerAdd@http://localhost:3000/packages/leaflet.js?ad7b569067d1f68c7403ea1c89a172b4cfd68d85:37
o.Map<.addLayer@http://localhost:3000/packages/leaflet.js?ad7b569067d1f68c7403ea1c89a172b4cfd68d85:37
Template.map.rendered/<.changed@http://localhost:3000/where-to-go.js?1b666a1c77f7d81e0212a2c65aa72a9d570b4dac:287
LocalCollection._observeFromObserveChanges/observeChangesCallbacks.changed@http://localhost:3000/packages/minimongo.js?4ee0ab879b747ffce53b84d2eb80d456d2dcca6d:3845
LocalCollection._CachingChangeObserver/self.applyChange.changed@http://localhost:3000/packages/minimongo.js?4ee0ab879b747ffce53b84d2eb80d456d2dcca6d:3750
.observeChanges/wrapCallback/</<@http://localhost:3000/packages/minimongo.js?4ee0ab879b747ffce53b84d2eb80d456d2dcca6d:374
.runTask@http://localhost:3000/packages/meteor.js?148e9381d225ecad703f4b858769b636ff7a2537:576
.flush@http://localhost:3000/packages/meteor.js?148e9381d225ecad703f4b858769b636ff7a2537:604
.drain@http://localhost:3000/packages/meteor.js?148e9381d225ecad703f4b858769b636ff7a2537:612
LocalCollection.prototype.update@http://localhost:3000/packages/minimongo.js?4ee0ab879b747ffce53b84d2eb80d456d2dcca6d:732
@http://localhost:3000/packages/mongo-livedata.js?cf17a2975aa7445f0db2377c2af07e5efc240958:730
.apply/ret<@http://localhost:3000/packages/livedata.js?7f11e3eaafcbe13d80ab0fb510d25d9595e78de2:3818
.withValue@http://localhost:3000/packages/meteor.js?148e9381d225ecad703f4b858769b636ff7a2537:794
.apply@http://localhost:3000/packages/livedata.js?7f11e3eaafcbe13d80ab0fb510d25d9595e78de2:3810
Meteor.Collection.prototype[name]@http://localhost:3000/packages/mongo-livedata.js?cf17a2975aa7445f0db2377c2af07e5efc240958:531
Template.map.rendered/<.added/<@http://localhost:3000/where-to-go.js?1b666a1c77f7d81e0212a2c65aa72a9d570b4dac:272
o.Mixin.Events.fireEvent@http://localhost:3000/packages/leaflet.js?ad7b569067d1f68c7403ea1c89a172b4cfd68d85:37
o.Handler.MarkerDrag<._onDragEnd@http://localhost:3000/packages/leaflet.js?ad7b569067d1f68c7403ea1c89a172b4cfd68d85:40
o.Mixin.Events.fireEvent@http://localhost:3000/packages/leaflet.js?ad7b569067d1f68c7403ea1c89a172b4cfd68d85:37
o.Draggable<._onUp@http://localhost:3000/packages/leaflet.js?ad7b569067d1f68c7403ea1c89a172b4cfd68d85:39
o.DomEvent.addListener/s@http://localhost:3000/packages/leaflet.js?ad7b569067d1f68c7403ea1c89a172b4cfd68d85:39

Answer 1

好的，差不多了。问题是错误是由MarkerCluster插件创建的。当我将其排除时，它可以使用以下方法：

  var newMarker;
  Happening.find({}).observe({
    added: function(marker) {

      markerInit(marker);

      markers[newMarker.options._id] = newMarker;

      return map.addLayer(newMarker)
    },
    changed: function(marker){
      map.removeLayer(markers[marker._id]);

      markerInit(marker);

      markers[newMarker.options._id] = newMarker;

      map.addLayer(markers[marker._id]);
    }
  });

markerInit（）之前设置了我的代码之类的标记。我仍然不确定如何使用MarkerCluster工作。

在Meteors实时环境中的Leaflet中拖动标记

1 个答案: