Heatmap.js可点击按钮

Question

我正在使用Heatmap.js创建一个带有按钮的热图。单击按钮可正确显示我的热图，但chrome js控制台中有错误消息。

我的代码：

$(document).ready(function() {
var mapOptions = ...
var myLatlng = ...
var map = new google...

$('button#toggleTca').click(function(){
        drawHeatmap();
    });

  function drawHeatmap() {
        // heatmap layer
        heatmap = new HeatmapOverlay(map, 
        {
            // radius should be small ONLY if scaleRadius is true (or small radius is intended)
            "radius": 0.00005,
            "maxOpacity": 1, 
            // scales the radius based on map zoom
            "scaleRadius": true, 
            // if set to false the heatmap uses the global maximum for colorization
            // if activated: uses the data maximum within the current map boundaries 
            //   (there will always be a red spot with useLocalExtremas true)
            "useLocalExtrema": true,
            // which field name in your data represents the latitude - default "lat"
            latField: 'lat',
            // which field name in your data represents the longitude - default "lng"
            lngField: 'lng',
            // which field name in your data represents the data value - default "value"
            valueField: 'count'
        });

        var testData = {
            max: 8,
            data: [{lat: 1.298568, lng:103.772210, count: 30},
          {lat: 1.298581, lng:103.772103, count: 28}]
        };

        heatmap.setData(testData);
    }
});

我有以下错误：

  

未捕获的TypeError：无法读取属性＆＃39; fromLatLngToDivPixel＆＃39;的   undefined gmaps-heatmap.js：150

当我继续点击它时，会出现更多错误：

  

未捕获的TypeError：无法读取属性＆＃39; setData＆＃39;未定义的   gmaps-heatmap.js：191

但是，如果我删除click function：

$(document).ready(function() {
    var mapOptions = ...
    var myLatlng = ...
    var map = new google...

    drawHeatmap("tca");
    ...The rest will be the same from here...

错误将消失，热图仍然会加载。

知道消息显示undefined的原因以及如何通过点击按钮动作绘制热图吗？