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就在那里。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

使用angularjs中的lat-lng生成热图

1 个答案: