訪問AngularJS範圍變量來填充谷歌地圖

我有使用AngularJS它看起來像這樣一個JSON陣列獲取來自MongoDB的服務器：訪問AngularJS範圍變量來填充谷歌地圖

我controller.js：

var app = angular.module('myApp', []); 
app.controller('myCtrl',function($scope, $http) { 
$scope.stack=[]; 


$scope.loadData = function(){ 

    var request =$http({ 
     method: "post", 
     url: "my_api", 


     headers:{'Content-Type':'application/x-www-form-urlencoded' }, 
     transformRequest: function() { 
      var str = []; 
      str.push(encodeURIComponent("collection") + "=" + encodeURIComponent("emergencyalerts")); 
      return str.join("&"); 
     } 

    }); 
    request.success(function(response){ 
     console.log("success"); 

    for(var i = 0; i < response.length; i++) { 
      $scope.stack.push('new google.maps.LatLng('+response[i].location+')'); 
     } 

     console.log($scope.stack); 

    }); 

}; 
});

在控制檯：

$scope.stack= Array ["new google.maps.LatLng(33.75218,-118.29082)", 
        "new google.maps.LatLng(33.77276,-118.20692)", 
        "new google.maps.LatLng(33.90358,-118.18547)", 
        "new google.maps.LatLng(33.80297,-118.08174)" 
]

我想繪製在谷歌熱圖中這些點。

我的HTML頁面：

<body ng-app='myApp' ng-controller='myCtrl' ng-init="loadData()"> 
<div id="map"></div> 
<script> 
    var map, heatmap; 

    function initMap(getNum) { 
    map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 10, 

     center: {lat: 34.022352, lng: -118.285117}, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 

    var gradients = { 
     color: [ 
     'rgba(0, 0, 0, 0)', 
     'rgba(0, 0, 0, 0)', 
     'rgba(0, 0, 0, 0)', 
     'rgba(0, 0, 159, 1)', 
     'rgba(255, 0, 0, 1)', 
     'rgba(255, 0, 0, 1)' 
     ] 
    }; 

    heatmap = new google.maps.visualization.HeatmapLayer({ 
     data: $scope.stack, 
     radius: 13, 
     opacity: 100, 
     map: map 
    }); 
    heatmap.set('gradient', gradients['color']); 

    } 
</script>

錯誤：的ReferenceError：$範圍沒有定義

如何解決它，並從蒙戈DB獲取數據顯示在實時緯度經度點？

來源

2017-04-11 RPS

u能提供代碼的詳細信息/ –

穆罕默德，我現在已經編輯我的問題！你能幫我解決這個錯誤嗎？我需要從API獲取lat-lng點並在熱圖上實時顯示。 – RPS

參考誤差是因爲$的範圍不適以外的角度的應用程序。爲此，您必須使用angular.element訪問範圍以訪問角度應用程序之外的$範圍。做這樣的事情：

var scope = angular.element($("pointerToUppermostDivOfPage").scope(); 
heatmap = new google.maps.visualization.HeatmapLayer({ 
    data: scope.stack, 
    radius: 13, 
    opacity: 100, 
    map: map 
});

來源

2017-04-11 09:01:55

@RagapriyaSivakumar：希望摸索出適合你。 –

不，沒有帶來什麼我希望它做的！該API有一些位置經緯度點。我需要從DB中檢索這些點並實時顯示在HeatMap上。以前我已經硬編碼經緯度點。它正在工作。我已經在AngularJS中編寫代碼來檢索點。我在控制檯看到點被檢索。如果我給的數據：在你告訴的方式scope.stack，沒有任何反應:(我想我的熱圖上熱圖顯示檢索到的緯度和經度點 – RPS

它的工作原理感謝更明確的解決方案：！變種$ element = $（'＃div1'）; var scope = angular.element（$ element）.scope（）; 這裏div1是最上面的div的id（即body）例子： – RPS

改寫上述方案：

var $element = $('#div1'); 
var scope = angular.element($element).scope(); 
heatmap = new google.maps.visualization.HeatmapLayer({ 
    data: scope.stack, 
    radius: 13, 
    opacity: 100, 
    map: map 
});

這裏DIV1是最上層的div（即身體）的ID。

例子：

<body ng-app='myApp' ng-controller='myCtrl' ng-init="loadData()" id="div1">

來源

2017-04-21 10:41:28 RPS

訪問AngularJS範圍變量來填充谷歌地圖

回答

相關問題