[英]How to modify Google Maps URL to display a set of marked locations?
[英]How to dynamically modify Google Maps Heatmap locations with data from database
我正在嘗試使用有角度的谷歌地圖: 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));
}
假設您的數據庫數據可以通過http get in json格式訪問(在下面的示例中,數據是從taxiData.json
文件中檢索的),下面的示例演示了如何在加載數據后初始化熱圖圖層。
例
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.