流星显示Google地图中的集合位置

Question

我使用此tutorial中的示例代码使用dburles:google-maps包显示位置集合。除了本教程中的步骤之外，我唯一需要做的就是添加meteor sessions包（默认情况下不包含在最新版本的meteor中）。

但是，当我调试网站时，虽然地图正常加载并且正确居中，但places集合似乎尚未加载，而Meteor.startup()似乎也没有run（函数内的console.log不打印）。

如果我在浏览器控制台窗口中执行Places.find().fetch()，则会返回一个空的对象集合。

我在这里缺少什么？

＆＃13;

＆＃13;

Places = new Mongo.Collection('places');

if (Meteor.isClient) {
  var lookup = [];

  Meteor.startup(function() {
    GoogleMaps.load({v: '3', key: 'API_KEY'});
  });

  Template.map.onCreated(function() {
    var self = this;

    GoogleMaps.ready('map', function(map) {
      self.autorun(function() {
        getBox();

        var handle = Meteor.subscribe('places', Session.get('box'));
        if (handle.ready()) {
          var places = Places.find().fetch();

          _.each(places, function(place) {
            var lat = place.location.coordinates[0];
            var lng = place.location.coordinates[1];

            if (!_.contains(lookup, lat+','+lng)) {
              var marker = new google.maps.Marker({
                position: new google.maps.LatLng(lat, lng),
                map: GoogleMaps.maps.map.instance
              });
              lookup.push(lat+','+lng);
            }
          });
        }
      });

      google.maps.event.addListener(map.instance, 'dragend', function(e){
        getBox();
      });

      google.maps.event.addListener(map.instance, 'zoom_changed', function(e){
        getBox();
      });
    });
  });

  Template.map.helpers({
    mapOptions: function() {
      if (GoogleMaps.loaded()) {
        return {
          center: new google.maps.LatLng(52.370216, 4.895168),
          zoom: 14
        };
      }
    },
    places: function() {
      return Places.find();
    }
  });

  function getBox() {
    var bounds = GoogleMaps.maps.map.instance.getBounds();
    var ne = bounds.getNorthEast();
    var sw = bounds.getSouthWest();
    Session.set('box', [[sw.lat(),sw.lng()], [ne.lat(),ne.lng()]]);
  }
}

if (Meteor.isServer) {
  Meteor.publish('places', function(box) {
    var find = {
      location: {
        $geoWithin: {
          $box: box
        }
      }
    };

    return Places.find(find);
  });

  Meteor.startup(function() {
    console.log('here');
    var data = [
      {
        "name": "Nieuwmarkt, Amsterdam",
        "location": {
          "type": "Point",
          "coordinates": {
            "lat": 52.372466,
            "lng": 4.900722
          }
        }
      },
      {
        "name": "Waterlooplein, Amsterdam",
        "location": {
          "type": "Point",
          "coordinates": {
            "lat": 52.368078,
            "lng": 4.902281
          }
        }
      },
      {
        "name": "Anne Frank Huis, Amsterdam",
        "location": {
          "type": "Point",
          "coordinates": {
            "lat": 52.375218,
            "lng": 4.883977
          }
        }
      },
      {
        "name": "Dappermarkt, Amsterdam",
        "location": {
          "type": "Point",
          "coordinates": {
            "lat": 52.362222,
            "lng": 4.927778
          }
        }
      },
      {
        "name": "Westergas, Amsterdam",
        "location": {
          "type": "Point",
          "coordinates": {
            "lat": 52.385946,
            "lng": 4.875867
          }
        }
      },
      {
        "name": "Ransdorp, Amsterdam",
        "location": {
          "type": "Point",
          "coordinates": {
            "lat": 52.392954,
            "lng": 4.993593
          }
        }
      },
    ];

    if(!Places.find().count()) {
      _.each(data, function(place) {
        Places.insert({
          name: place.name,
          location: {
            type: 'Point',
            coordinates: [
              place.location.coordinates.lat,
              place.location.coordinates.lng
            ]
          }
        })
      });
    }
  });
}

＆＃13;

body {
    padding: 20px;
}

h1 {
    margin: 0 0 20px;
}

.map {
    float: left;
    width: 50%;
    height: 400px;
}

.places {
    float: left;
    box-sizing: border-box;
    width: 50%;
    padding: 20px;
}

＆＃13;

<head>
	<title>Reactive Google Maps with Meteor</title>
</head>

<body>
<h1>Reactive Google Maps with Meteor</h1>
{{> map}}
</body>

<template name="map">
	<div class="map">
		{{> googleMap name="map" options=mapOptions}}
	</div>
	<div class="places">
		{{#each places}}
			<li>{{name}}</li>
		{{/each}}
	</div>
</template>

＆＃13;

＆＃13;

＆＃13;