Zugang AngularJS Umfang Variable in JavaScript aufzufüllen google map

Ich habe ein Array JSON geholt von MongoDB-Server AngularJS verwendet, die wie folgt aussieht:Zugang AngularJS Umfang Variable in JavaScript aufzufüllen google map

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

    }); 

}; 
});

In Konsole:

$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)" 
]

Ich möchte diese Punkte in Google HeatMap plotten.

Meine HTML-Seite:

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

Fehler: Reference: $ Umfang nicht

definiert

Wie es zu lösen und lat lng Punkte in Echtzeit angezeigt werden, indem Daten von Mongo DB holen?

Quelle

2017-04-11 RPS

können u mehr Details über Code zur Verfügung stellen/ –

Muhammed, ich habe meine Frage jetzt bearbeitet! Können Sie mir bitte helfen, den Fehler zu beheben? Ich muss lat-lng Punkte von api holen und in Echtzeit auf Heatmap anzeigen. – RPS

Der Referenzfehler liegt darin, dass $ scope außerhalb von angular app nicht verfügbar ist. Dazu müssen Sie mit angle.element auf den Bereich zugreifen, um auf die $ scope outside angular app zuzugreifen. Tun Sie etwas wie folgt aus:

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

Quelle

2017-04-11 09:01:55

@RagapriyaSivakumar: hoffe, es hat für dich geklappt. –

Nein, es bringt nicht, was ich erwarte es zu tun! Die API verfügt über einige Positionspunkte. Ich muss diese Punkte aus der DB abrufen und auf HeatMap in Echtzeit anzeigen. Zuvor hatte ich lat-lng Punkte fest programmiert. Es hat funktioniert. Ich habe Code in AngularJS geschrieben, um die Punkte abzurufen. Ich sehe in der Konsole, dass die Punkte abgerufen werden. Wenn ich Daten geben: scope.stack in der Weise, dass Sie gesagt haben, passiert nichts :(ich meine HeatMap wollen die abgerufenen anzuzeigen Lat-lng Punkte auf HeatMap – RPS

Es funktioniert dank Mehr klare Lösung:..! var $ element = $ ('# div1'); var scope = eckle.element ($ element) .scope(); Hier ist div1 die ID der obersten div (dh Körper) Beispiel: – RPS

Umformulierung der obigen Lösung:

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

Hier div1 ist die ID der obersten div (das heißt Körper).

Beispiel:

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

Quelle

2017-04-21 10:41:28 RPS

Zugang AngularJS Umfang Variable in JavaScript aufzufüllen google map

Antwort

Verwandte Themen