访问JavaScript中的AngularJS范围变量以填充google地图_Javascript_Angularjs_Json_Google Maps_Heatmap

访问JavaScript中的AngularJS范围变量以填充google地图

javascript angularjs json google-maps

访问JavaScript中的AngularJS范围变量以填充google地图,javascript,angularjs,json,google-maps,heatmap,Javascript,Angularjs,Json,Google Maps,Heatmap,我使用AngularJS从MongoDB服务器获取了一个JSON数组，如下所示： var scope = angular.element($("pointerToUppermostDivOfPage").scope(); heatmap = new google.maps.visualization.HeatmapLayer({ data: scope.stack, radius: 13, opacity: 100, map: map }); My controller.js：

我使用AngularJS从MongoDB服务器获取了一个JSON数组，如下所示：

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

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

    });

};
});

我想在谷歌热图上画出这些点

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


var图、热图；
函数initMap（getNum）{
map=new google.maps.map（document.getElementById（'map'）{
缩放：10，
中心：{lat:34.022352，lng:-118.285117}，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
变量梯度={
颜色：[
'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=新建google.maps.visualization.HeatmapLayer({
数据：$scope.stack，
半径：13，
不透明度：100，
地图：地图
});
热图.set（'gradient'，gradients['color']）；
}

错误：ReferenceError:$未定义作用域

如何通过从Mongo DB获取数据来解决此问题并实时显示lat lng点？

参考错误是因为$scope在angular app之外不可用。为此，您必须使用angular.element访问作用域以访问angular应用程序外部的$scope。这样做：

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

引用错误是因为$scope在angular app之外不可用。为此，您必须使用angular.element访问作用域以访问angular应用程序外部的$scope。这样做：

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

重新表述上述解决方案：

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

重新表述上述解决方案：

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

你能提供更多关于code的细节吗/Muhammed，我现在已经编辑了我的问题！你能帮我解决这个错误吗？我需要从api获取lat lng点，并在热图上实时显示。你能提供更多关于代码/穆罕默德的详细信息吗，我现在编辑了我的问题！你能帮我解决这个错误吗？我需要从api获取lat lng点，并在热图上实时显示。不，它并没有显示出我所期望的效果！API有一些液化天然气点的位置。我需要从数据库中检索这些点，并实时显示在热图上。以前我对lat lng点进行了硬编码。它起作用了。我已经用AngularJS编写了检索点的代码。我在控制台中看到点被检索到。如果我按照您所说的方式给出数据：scope.stack，则什么也不会发生：（我希望我的热图在热图上显示检索到的lat lng点。它可以工作。谢谢！更清晰的解决方案：var$element=$（'#div1'）；var scope=angular.element（$element.scope（）；这里div1是最上面的div（即主体）的id）示例：不，它没有显示我所期望的功能！API有一些位置lat lng点。我需要从DB中检索这些点并实时显示在热图上。以前我对lat lng点进行了硬编码。它正在工作。我用AngularJS编写代码来检索点。我在控制台中看到这些点被检索。如果我e data:scope.stack按照您所说的方式，什么也没有发生：（我希望我的热图在热图上显示检索到的lat lng点。它可以工作。谢谢！更清晰的解决方案：var$element=$（'#div1'）；var scope=angular.element（$element）.scope（）；这里div1是最上面的div（即主体）的id示例：