如何在Angular-Google-Maps中使用heatmapLayer？

Question

我正在尝试让heatmapLayer在我使用angular-google-maps构建的地图中工作.我按以下方式设置了我的HTML:

<ui-gmap-google-map center='playerMap.center' zoom='playerMap.zoom'>
  <ui-gmap-layer namespace="visualization" type="HeatmapLayer" show="true" onCreated="playerMap.heatmapCallback()"></ui-gmap-layer>
  <ui-gmap-markers
    models="playerMap.markers"
    coords="'self'"
    icon="'icon'"
    fit="true"
    doCluster="playerMap.cluster"
    options="'options'"
    click="playerMap.showWindow()"
    events="playerMap.markersEvents">
    <ui-gmap-window
      show="playerMap.window.show"
      coords="playerMap.window.model"
      options="playerMap.window.options"
      closeclick="playerMap.window.closeClick()"
      templateUrl="'/app/dmPlayerMap/infoWindow.html'"
      templateParameter="playerMap.window">
    </ui-gmap-window>
  </ui-gmap-markers>
</ui-gmap-google-map>

我很困惑我应该在我的playerMap.heatmapCallback()方法中添加什么以及我需要做的其他任何事情来设置基本热图.该领域的文档非常缺乏.

Answer 1

这个想法是使用playerMap.heatmapCallback(没有括号,没有playerMap.heatmapCallback())来创建加热层的点.

这是一个例子:

在HTML中

<ui-gmap-google-map center='map.center' zoom='map.zoom'>
    <ui-gmap-layer namespace="visualization" type="HeatmapLayer" show="map.showHeat" onCreated="map.heatLayerCallback"></ui-gmap-layer>
</ui-gmap-google-map>

在控制器中

function MockHeatLayer(heatLayer) {
    // Adding 500 Data Points
    var map, pointarray, heatmap;

    var taxiData = [
        new google.maps.LatLng(37.782551, -122.445368),
        new google.maps.LatLng(37.782745, -122.444586),
        new google.maps.LatLng(37.782842, -122.443688),
        new google.maps.LatLng(37.782919, -122.442815),
        new google.maps.LatLng(37.782992, -122.442112),
        new google.maps.LatLng(37.783100, -122.441461),
        new google.maps.LatLng(37.783206, -122.440829),
        new google.maps.LatLng(37.783273, -122.440324),
        new google.maps.LatLng(37.783316, -122.440023),
        new google.maps.LatLng(37.783357, -122.439794),
        new google.maps.LatLng(37.783371, -122.439687)
    ];


    var pointArray = new google.maps.MVCArray(taxiData);
    heatLayer.setData(pointArray);
    };

$scope.map = {
            center: {
            latitude: 37.782551,
            longitude: -122.445368
            },
            zoom: 12,
            heatLayerCallback: function (layer) {
                //set the heat layers backend data
                var mockHeatLayer = new MockHeatLayer(layer);
                },
            showHeat: true
        };

你可以从这里获得更多的观点

干杯!