如何使用Meteor和Leaflet在实时应用程序中触发弹出窗口

时间:2014-03-03 05:26:26

标签: javascript jquery meteor maps leaflet

我正在尝试设置一种方法来点击帖子到地图上的某个点。我希望得到与此相同的效果:

http://jsfiddle.net/ZkC5M/17/

但在流中,它有点不同。点击构建一个队列,这样当你点击它时,它会点击通过加载帖子的次数。这会大大减慢应用程序的速度,我无法找到正确的功能来确定正确的标记。

这是一个使用Meteor并使用Leaflet构建的实时应用程序:

http://twitter-map.meteor.com/

locStream = new Meteor.Stream('loc');

markers = [];

locStream.on('update', function(data) {

  markerIterate++;

  // Sets Marker
  var marker = L.marker([data.lat, data.lon], {icon: icon}, {title:"marker_" + markerIterate})
      .addTo(map)
      .bindPopup(contentString)
      .on('click', function(e) {widgetFunc()}); // widgetFunc() is set off to trigger the template for twitter



  //Creates template for feed twitter view
  var feedString = 
    '<div class="tweet">'+
    '<blockquote class="twitter-tweet" lang="en">' +
    '<a href="https://twitter.com/' + data.user + '/statuses/' + data.id + '"></a>' +
    '</blockquote>' +
    '<a class="goTo" id="marker_' + markerIterate + '" href="#">Find on map</a>' +
    '</div>';

  // Sets tweet into the feed area
  $('#feed').append(feedString)

  markers.push(marker);


  //This is the code that I have been playing with. I got it to work to open only one post. 
  function markerFunction(id){
    var markerID = markers[1].options.title;
    if (markerID == id){
        markers[1].openPopup();
    };
  }

  // This builds a queue of clicks that slows the app down drastically
  $("a").click(function(){
      markerFunction($(this)[0].id);
  });


});// End Stream

0 个答案:

没有答案