如何使用dburles显示热图：谷歌地图流星包？ [英] How to display a heatmap using dburles:google-maps Meteor package?

问题描述

更新：下面的代码是根据公认的答案修复的，并且已被证实可以正常工作。

我有点卡在Meteor ，请帮助我。
我已经安装了dburles：google-maps包，并获得了地图显示标记。
然后我试图显示一个热图，它导致了一个错误，我无法解决 - 未捕获的InvalidValueError：setMap：不是Map的一个实例（匿名函数）

控制台输出可以在这里看到 - http://improveit.meteor.com / map

Template.map.helpers（{issueMapOptions：function（）{//确保maps API已经加载if （GoogleMaps.loaded（））{// Map初始化选项返回{zoom：13，center：new google.maps.LatLng（37.774546，-122.433523），mapTypeId：google.maps.MapTypeId.SATELLITE，mapTypeControl：false，panControl： false，streetViewControl：false};}}}）; Template.map.onCreated（function（）{//我们可以使用`ready`回调与地图交互API一旦地图准备就绪。 GoogleMaps.ready（'issueMap'，function（issueMap）{var issueData = [new google.maps.LatLng（37.782551，-122.445368），new google.maps.LatLng（37.757676，-122.405118），new google.maps.LatLng新的google.maps.LatLng（37.756335，-122.403719），新的google.maps.LatLng（37.755503，-122.403406），新的google.maps.LatLng（37.754665，-122.403242），新的google.maps。 LatLng（37.753837，-122.403172），new google.maps.LatLng（37.752986，-122.403112），new google.maps.LatLng（37.751266，-122.403355）]; var issueArray = new google.maps.MVCArray（issueData）; var heatMapLayer = new google.maps.visualization.HeatmapLayer（{data：issueArray，radius：20}）; heatMapLayer.setMap（issueMap.instance）;}）;}）;

< template name =map> < h1>发布热图< / h1> < p>此地图会显示问题及其严重程度< / p> < div class =map-container> {{> googleMap name =issueMapoptions = issueMapOptions}}< / div>< / template>

b

解决方案

更改此行：

  heatMapLayer.setMap issueMap）; 
  

至

  heatMapLayer.setMap（issueMap.instance）; 
  

setMap方法需要一个google map实例。 .ready 的回调没有直接提供，因为它还有一个选项对象，以方便使用。

我确认它可以在您的网站上运行： b
$ b

UPDATE: Code below is fixed as per accepted answer and is confirmed to be working.

I'm a bit stuck with Meteor, please help me out. I've installed the dburles:google-maps package and got the map to show markers just fine. Then I tried to display a heatmap and it's causing an error, I can't resolve - "Uncaught InvalidValueError: setMap: not an instance of Map(anonymous function)"

Console output can be seen here - http://improveit.meteor.com/map

Template.map.helpers({
  issueMapOptions: function() {
    // Make sure the maps API has loaded
    if (GoogleMaps.loaded()) {
      // Map initialization options
      return {
        zoom: 13,
        center: new google.maps.LatLng(37.774546, -122.433523),
        mapTypeId: google.maps.MapTypeId.SATELLITE,
        mapTypeControl: false,
        panControl: false,
        streetViewControl: false
      };
    }
  }
});

Template.map.onCreated(function() {
  // We can use the `ready` callback to interact with the map API once the map is ready.
  GoogleMaps.ready('issueMap', function(issueMap) {
    

    var issueData = [
      new google.maps.LatLng(37.782551, -122.445368),
      new google.maps.LatLng(37.757676, -122.405118),
      new google.maps.LatLng(37.757039, -122.404346),
      new google.maps.LatLng(37.756335, -122.403719),
      new google.maps.LatLng(37.755503, -122.403406),
      new google.maps.LatLng(37.754665, -122.403242),
      new google.maps.LatLng(37.753837, -122.403172),
      new google.maps.LatLng(37.752986, -122.403112),
      new google.maps.LatLng(37.751266, -122.403355)
    ];       
      
      
      var issueArray = new google.maps.MVCArray(issueData);
      
       var heatMapLayer = new google.maps.visualization.HeatmapLayer({
            data: issueArray,
            radius: 20
        });
      

      heatMapLayer.setMap(issueMap.instance);
      
      
  });
});

 <template name="map">
  <h1>Issue heat map</h1>
  <p>This map will display issues and their severity</p>
   <div class="map-container">
    {{> googleMap name="issueMap" options=issueMapOptions}}
  </div>
</template>

解决方案

Change this line:

heatMapLayer.setMap(issueMap);

to

heatMapLayer.setMap(issueMap.instance);

The setMap method requires a google map instance. the callback of .ready does not directly provide this as it also has an options object for extra convenience.

I confirmed it works on your site:

这篇关于如何使用dburles显示热图：谷歌地图流星包？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！