流星 - 谷歌地图标记点击事件

问题描述：

我想，当一个标记，用户点击，我想一个弹出式窗口，给他一些信息（例如：让说的标记代表的位置，当他点击一个标记它的显示器给他这个位置的所有信息）流星 - 谷歌地图标记点击事件

这样做最简单的方法是什么？

很确定谷歌地图会为此类事情生成自定义事件。如果哟使用的反应，有（https://github.com/tomchentw/react-google-maps），其正常工作的[I用于GM NPM包]，我认为他们的例子之一是如何实现自定义点击标记上的事件。 – CodeChimp

，我只用流星（火焰在前端）.. –

不要只使用GMAPs开箱的 - 使用我的回答中提到的包，否则你会花时间重新发明轮子。该软件包将处理所有加载订单操作。 – NicholasByDesign

答

查看您的标记物Google Maps文档如何设置事件侦听器。您应该可以在Blaze模板代码中执行此操作，很可能是模板的onCreated()或onRendered()。

答

解决办法是：

marker.addListener('click', function() { 
    swal({ 
     title: "More details", 
     text: "Type what you want here", 
     }); 
});

问候，

答

添加这个包https://github.com/dburles/meteor-google-maps

HTML

{{> googleMap name="map" options=mapOptions}}

客户端JS

Meteor.startup(function() { 
    GoogleMaps.load({ 
     v: '3', 
     key: 'YOUR_KEY' 
    }); 
}); 

Template.YOUR_TEMPLATE.helpers({ 
    mapOptions:() => { 
     if (GoogleMaps.loaded()) { 
      return { 
       center: new google.maps.LatLng(YOUR_MAP_LAT, YOUR_MAP_LNG), 
       zoom: 1 
      }; 
     } 
    } 
}); 

Template.YOUR_TEMPLATE.onRendered(function(){ 
    GoogleMaps.ready('map', function(map) { 
     let marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(YOUR_MARKER_LAT, YOUR_MARKER_LNG), 
      map: map.instance 
     }) 
     let infowindow = new google.maps.InfoWindow({ 
      content: 'SOME CONTENT' 
     }) 
     marker.addListener('click', function(event){ 
      infowindow.open(map.instance, marker); 
     }) 


    }); 
});

流星 - 谷歌地图标记点击事件

相关推荐