如何從Mongodb中獲取數據來製作地圖標記？

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個標記。因此，我在每個渲染之間使用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(); 
    } 
});