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

Question

我正在尝试让 heatmapLayer 在我用 angular-google-maps 构建的 map 中工作.我通过以下方式设置了我的 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>

在 Controller 中

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可以获得更多积分

干杯!