Question

我有一张当前显示所有标记的地图。我想在点击复选框时更新地图上的标记。

加载我做的标记

Caves.find({$or: [{ backmount: {$exists: false}},{backmount: true}]}).observe({

如果单击该复选框，则应将过滤器更改为

Caves.find({ backmount: false}).observe({

我不知道如何将它放入我的代码中。

这是加载标记的代码

Template.map.onCreated(function() {
  GoogleMaps.loadUtilityLibrary('js/geolocationmarker-compiled.js');
  GoogleMaps.loadUtilityLibrary('js/infobox.js');

  var markers = {};

  GoogleMaps.ready('map', function(map) {
    var latLng = currentPosition();

    Tracker.autorun(function() {
      map.instance.setCenter(new google.maps.LatLng(latLng.lat, latLng.lng));
      var GeoMarker = new GeolocationMarker(map.instance);

    });

    Caves.find({$or: [{ backmount: {$exists: false}},{backmount: true}]}).observe({
      added: function(doc) {
        var infobox = new InfoBox({
          content: $("#infobox")[0],
          disableAutoPan: false,
          pixelOffset: new google.maps.Size(-140,0),
          zIndex: null,
          infoBoxClearance: new google.maps.Size(1,1),
          boxStyle: {
            background: "url('images/tipbox.gif') no-repeat",
            opacity: 0.75,
            width: "280px"
          }
        });

        var marker = new google.maps.Marker({
          draggable: false,
          animation: google.maps.Animation.DROP,
          position: new google.maps.LatLng(doc.location.coordinates.latitude,doc.location.coordinates.longitude),
          id: doc._id,
          map: map.instance
        });

        marker.addListener('click', function() {
          infobox.open(map.instance, this);
        });

        markers[doc._id] = marker;
      },
      changed: function(newDoc, oldDoc) {
        markers[newDoc._id].setPosition({ lat: newDoc.lat, lng: newDoc.lng});
      },
      removed: function(oldDoc) {
        markers[oldDoc._id].setMap(null);

        google.maps.event.clearInstanceListeners(markers[oldDoc._id]);

        delete markers[oldDoc._id];
      }
    });

  });
});

我有一个带复选框的模板（#sidemountOnly）

<template name="mapFilters">
  <div class="row">
    <div class="col-md-12">
      <ul class="filemanager-options">
        <li>
          <div class="ckbox ckbox-default">
            <input type="checkbox" id="sidemountOnly" value="1">
            <label for="sidemountOnly">Sidemount Only</label>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

非常感谢你的帮助

Answer 1

我可以回答我自己的问题。我使用了一个会话变量，我改变了替换。一些相关的代码：

创建活动：

Template.mapFilters.events({
  "change #sidemountOnly": function(event) {
    Session.set("sidemountOnly",event.target.checked);
  }
})

在autorun中传递订阅

Tracker.autorun(function() {
      getBox();
      Meteor.subscribe("primaryCoordinates", Session.get('box'), Session.get('sidemountOnly'));


      var GeoMarker = new GeolocationMarker(map.instance);

    });

在服务器端的发布中创建过滤器

Meteor.publish('primaryCoordinates', function(box,sidemountOnly) {
  var filter = {};

  if(sidemountOnly) {
    filter = {backmount: false};
  } else {
    filter = {$or: [{ backmount: {$exists: false}},{backmount: true}]};
  }

  var find = { $and: [{
    location: {
      $geoWithin: {
        $box: box
      }
    }},filter]
  };

  return Caves.find(find);
});

流星谷歌地图显示标记取决于复选框过滤器

1 个答案: