用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

您还需要包含visualization库，因为HeatmapLayer在那里。

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>