如何从Mongodb中提取数据来制作地图标记

幸运的是，我最近在一个应用程序中实现了类似的功能。我发现，在Meteor中，即使你只有20个左右的标记，在谷歌地图上渲染一组标记也很容易出错。因此，我在每次渲染之间使用500毫秒的延迟，这使得代码比它应该的更复杂。以下是根据你的代码修改的完整工作代码：

Template.map.onCreated(function () {
  var self = this;
  // Create the map.
  self.state = new ReactiveDict('myTemplate.state');
  self.state.set('mapMarkers', []);
  // Initialize map
  GoogleMaps.ready('myMap', function (map) {
    self.state.set('mapReady', true);
  });
});
Template.map.onRendered(function(){
  var self = this;
  // Push markers to UI when ready
  // XXX Google Maps does not behave well when you try to add markers all at
  //      once and will throw errors. Therefore, rather than rendering markers
  //      on the map upon creation, here we first push them to an array, then
  //      in an autorun we separately render them with a delay.
  GoogleMaps.ready('myMap', function onMapReady(map) {
    // setup dependencies
    var isMapReady = self.state.get('mapReady');
    var hasData = !!MarkerData.findOne();
    var isGoogleDefined = typeof(google) !== 'undefined';
    var theMarkers = MarkerData.find({}, {sort: {state:1}});
    var allMarkers = [];
    var infoWindows = [];
    if ( isMapReady && hasData && isGoogleDefined ) {
      var markers = theMarkers.fetch();
      var marker, docMarker, markers, infoWindow;
      // Render marker for each item in collection
      _.each(markers, function (marker, i, cursor) {
        var latitude = marker.lat;
        var longitude = marker.lng;
        var latlng = new google.maps.LatLng( latitude, longitude );
        // Build the info window to contain marker details.
        infoContent = '<strong>' + marker.title + '</strong>' +'<br/>' + marker.address;
        // Render it
        infoWindow = new google.maps.InfoWindow({
          content: infoContent,
          disableAutoPan: true
        });
        // Create marker to place on map
        marker = new google.maps.Marker({
          position: latlng
        });
        // Push marker to UI state
        allMarkers.push(marker);
        infoWindows.push(infoWindow);
        self.state.set('mapMarkers', markers);
      });
    }
    // Ensure the array we created contains all markers
    // from our collection, then render them with a delay.
    self.autorun(function () {
      var markerLength = allMarkers.length;
      var targetLength = theMarkers.count();
      if ( markerLength === targetLength ) {
        _.each( allMarkers, function( marker, index, list ){
          Meteor.setTimeout(function(){
            var mapInstance = GoogleMaps.maps.myMap.instance;
            // This is what actually places the marker on the map.
            marker.setMap( mapInstance );
            google.maps.event.addListener(marker, 'click', function () {
              infoWindows[index].open(mapInstance, marker);
            });
            google.maps.event.addListener(marker, 'mouseout', function () {
              infoWindows[index].close();
            });
          }, 500);
        });
      }
    });
  });
});
Template.map.helpers({
  mapOptions: function () {
    // Ensure the API is loaded
    if ( GoogleMaps.loaded() ) {
      // initialization opts
      return {
        center: new google.maps.LatLng(-37.8136, 144.9631),
        zoom: 8
      }
    } else {
      return null;
    }
  },
  allMarkers: function () {
    return MarkerData.find();
  }
});