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

Question

我正在尝试让用angular-google-maps构建的地图中的heatmapLayer正常工作。我已经通过以下方式设置了我的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
        };

您可以从here获得更多积分

干杯!