【问题标题】:How can I add new markers to Google Map in Meteor?如何在 Meteor 中向 Google 地图添加新标记?
【发布时间】:2014-06-02 15:26:18
【问题描述】:

当我点击给定位置时,我目前正在谷歌地图上添加标记。标记当前保存到集合 - 标记 - 和更经典的数组中。我现在想要的是在地图上添加新的标记,因为它们是由其他用户添加的。

我的问题是:有没有办法在集合被修改时得到通知(例如另一个用户添加标记)?

也许这不是最好的方法。还有什么建议吗?

if (Meteor.isClient) {

  Template.hello.rendered = function(){

    markersArray = [];
    var latlng = new google.maps.LatLng(46.123, 8.843);
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function (position) {
        latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        map.setCenter(latlng);
      });
    }

    var opts = {
      zoom: 16,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map-canvas"), opts);

    // add a click event handler to the map object
    google.maps.event.addListener(map, "click", function(event)
    {
      placeMarker(event.latLng);
    });

    Session.set('map', true);

    function placeMarker(location) {

     var marker = new google.maps.Marker({
      position: location, 
      map: map
    });

     Markers.insert({"marker": location, "date": new Date()});
     markersArray.push(marker);
      }

}
}

【问题讨论】:

    标签: javascript google-maps google-maps-api-3 meteor


    【解决方案1】:

    根据上一个答案,您应该使用observestructure,但您确实需要避免让观察者永远运行:

    Template.hello.rendered = function() {
        this.markerObserve = Markers.find({}).observe({
            added: function(m) {
                placeMarker(m.location)  // obviously depends on the structure of Markers documents
            }
        });
    };
    
    Template.hello.destroyed = function() {
        this.markerObserve.stop();
    }
    

    【讨论】:

      【解决方案2】:

      你必须使用观察者

      Template.hello.rendered = function(){
      
      
       Markers.find({}).observe({
        added: function (m) {
      
        // Add marker 
      
        }
       });
      }
      

      【讨论】:

        猜你喜欢
        • 2017-05-15
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2020-09-13
        • 2013-08-07
        • 1970-01-01
        相关资源
        最近更新 更多