如何使用数据库中的数据动态修改 Google Maps Heatmap 位置答案

【问题标题】：How to dynamically modify Google Maps Heatmap locations with data from database如何使用数据库中的数据动态修改 Google Maps Heatmap 位置
【发布时间】：2016-03-02 11:06:26
【问题描述】：

我正在尝试使用角度谷歌地图： https://github.com/allenhwkim/angularjs-google-maps/blob/master/testapp/

测试数据： https://github.com/allenhwkim/angularjs-google-maps/blob/master/testapp/taxi-data.js

Javascript 示例：

var taxiData = [
  new google.maps.LatLng(37.782551, -122.445368),
  new google.maps.LatLng(37.782745, -122.444586),
];

例如，我使用 AngularJS 进行查询并在列表数据 [] 中检索纬度和经度。

如何动态修改上面的代码，以便它使用来自 DB 的数据“初始化”新的 google.maps.LatLng？

我的伪代码示例：

var data = [];
var taxiData = [];

//angular调用存储数据，所以我们有数据：

data = someCall..

将实例动态添加到taxiData列表中：

for (var i = 0; i < data.length; i++) {
    taxiData.push(new google.maps.LatLng(data[i].Latitude, data[i].Longitude));
}

【问题讨论】：

标签： javascript angularjs google-maps google-maps-api-3

【解决方案1】：

假设您的 db 数据可以通过 http get 以 json 格式访问（在下面的示例中，数据是从 taxiData.json file 检索的），以下示例演示了如何在加载数据后初始化热图层。

示例

angular.module('mapApp', ['ngMap'])
.controller("MapCtrl", function($scope,$http,NgMap){

  $scope.taxiData = [];

  NgMap.getMap().then(function(map) {

    $scope.taxiData = [];

    $http.get('https://rawgit.com/vgrem/6d9c464ab034f5b93295/raw/9ca3819aa8270823da64cba6f91d24945cc52940/taxiData.json').success(function(data) {
         $scope.taxiData = data.map(function(item){
             return new google.maps.LatLng(item.lat, item.lng);
         });

         var layer = $scope.map.heatmapLayers.taxiDataMap;
         layer.setData($scope.taxiData);
    });
  });
 
  
});

<script src="https://maps.google.com/maps/api/js?libraries=visualization"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>


<div ng-app="mapApp" ng-controller="MapCtrl">
    <ng-map zoom="13" center="37.774546, -122.433523" map-type-id="SATELLITE">
        <heatmap-layer id="taxiDataMap" data="taxiData"></heatmap>
    </ng-map>
  </div>

JSFiddle

【讨论】：