如何動態地修改與數據庫

我試圖用角谷歌地圖數據的谷歌地圖熱度地圖位置： 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進行查詢並在列表數據[]中檢索緯度和經度。

如何動態修改上面的代碼，以便使用我的數據從數據庫「初始化」新的google.maps.LatLng？

什麼，我曾在

比如我曾在僞代碼：

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

//角呼叫來存儲數據，因此我們有數據：

data = someCall..

動態添加實例插入taxiData列表：

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

來源

2016-03-02 Amel Salibasic

假設你的db數據可以通過http獲取以json格式訪問（在下面的例子中，數據是re從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

來源

2016-03-02 22:37:28

如何動態地修改與數據庫

回答

相關問題