在 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);
}

.as-console-wrapper{
  display:none !important;
}

<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>