angularjsでlat-lngでヒートマップを生成

Question

私はmongodbでangularjsを使用しています。

私はユーザーの座標を含むテーブルを持っています。

{ "mac" : "aa:22:01:d2:e6:f9","lat" : 33.53625,"lng" : -111.92674, "time" : 2017-07-12T04:44:13.707Z} 
{ "mac" : "aa:22:01:d2:e6:f9","lat" : 33.53625,"lng" : -111.92674, "time" : 2017-07-12 04:44:13.707Z} 
{ "mac" : "aa:22:01:d2:e6:f9","lat" : 33.53625,"lng" : -111.92674, "time" : 2017-07-12 04:46:59.707Z} 
{ "mac" : "aa:22:01:d2:e6:f9","lat" : 33.53625,"lng" : -111.92674, "time" : 2017-07-12 04:47:29.707Z} 

ヒートマップを表示したい。誰も私にこれを達成するための最良の方法を指摘することができます。

バックグラウンドで後で調整する必要がある建物の画像があります。

Answer 1

基本的には、データをgoogle.maps.LatLngオブジェクトの配列にマップする必要があります。その後、マップを初期化し、マップされたデータでヒートマップ層を初期化し、ヒートマップ層をマップに割り当てます。 sample

HeatmapLayerが存在するので、visualizationライブラリも含める必要があります。

function initMap() { 
 

 
    /* Data points defined as an array of LatLng objects */ 
 
    var data = [{ 
 
    "mac": "aa:22:01:d2:e6:f9", 
 
    "lat": 33.53625, 
 
    "lng": -111.92674, 
 
    "time": '2017-07-12T04:44:13.707Z' 
 
    }, { 
 
    "mac": "aa:22:01:d2:e6:f9", 
 
    "lat": 33.53625, 
 
    "lng": -111.92674, 
 
    "time": '2017-07-12 04:44:13.707Z' 
 
    }, { 
 
    "mac": "aa:22:01:d2:e6:f9", 
 
    "lat": 33.53625, 
 
    "lng": -111.92674, 
 
    "time": '2017-07-12 04:46:59.707Z' 
 
    }, { 
 
    "mac": "aa:22:01:d2:e6:f9", 
 
    "lat": 33.53625, 
 
    "lng": -111.92674, 
 
    "time": '2017-07-12 04:47:29.707Z' 
 
    }]; 
 

 
    var heatmapData = data.map(function(item) { 
 
    return new google.maps.LatLng(item.lat, item.lng) 
 
    }); 
 

 
    var center = new google.maps.LatLng(33.53625, -111.92674); 
 

 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    center: center, 
 
    zoom: 13, 
 
    mapTypeId: 'satellite' 
 
    }); 
 

 
    var heatmap = new google.maps.visualization.HeatmapLayer({ 
 
    data: heatmapData 
 
    }); 
 
    heatmap.setMap(map); 
 
}

<script async defer type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false&libraries=visualization&callback=initMap"></script> 
 

 
<div id="map" style="width:500px;height:150px"></div>