Question

我有一张我要制作标记的地图。我在Mongodb制作了一个集合，并有一个样本数据来制作标记。我不知道如何获取数据并制作标记。

地图

Meteor.startup(function() {  
  GoogleMaps.load();
});

Template.map.helpers({  
  mapOptions: function() {
    if (GoogleMaps.loaded()) {
      return {
        center: new google.maps.LatLng(-37.8136, 144.9631),
        zoom: 8
      };
    }
  }
});

Template.map.helpers({
  marker: function() {
    return MarkerData.find();
   }
});

制作标记

for (var i = 0; i < MarkerData.length; i++) {
  var lat = {{ lat }}
  var lng = {{ lng }}
  var title = {{ title }}
  var address = {{ address }}
  var url = {{ url }}
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng (lat, lng),
    map: map,
    title: title,
    animation: google.maps.Animation.DROP,
  });
}

我的收藏

MarkerData = new Mongo.Collection ('markerdata');

以下是集合中的数据

if (MarkerData.find().count() === 0) {
  MarkerData.insert({
    lat: 34.200659,
    lng: -118.519986,
    title: 'Extensions Plus HQ',
    address: '17738 Sherman Way Reseda, CA 91335',
    url: 'http://extensionsplus.com'
  }); 
}

需要输入更多数据。这只是确保代码正常工作的一个示例。

Answer 1

幸运的是，我最近在应用程序中实现了类似的功能。我发现，在Meteor中将标记集合渲染到Google地图上非常容易出错，即使您只有20个标记左右。因此，我在每次渲染之间使用500ms的延迟，这使得代码比应该更复杂。这是根据您的代码修改的完整工作代码：

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();
  }
});

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

1 个答案: